Поиск в таблице с javascript, исключая содержимое в пределах указанного класса c span - PullRequest
Новая
       25

Поиск в таблице с javascript, исключая содержимое в пределах указанного класса c span

0 голосов
/ 07 августа 2020

Я использую вариант кода JavaScript таблицы светофильтров для поиска в таблице, используя как раскрывающийся вариант поиска, так и поле поиска для ввода текста. Используя поле поиска, любой поисковый ввод, который соответствует текстовому содержимому строки таблицы, строка таблицы возвращается как видимая, в противном случае она скрывается.

Мне интересно, есть ли способ исключить текст, содержащийся внутри определенный класс из этого процесса поиска / сопоставления текстового контента?

В основном у меня есть диапазон скрытого контента, который становится видимым «при щелчке», который функционирует как своего рода «всплывающая подсказка». Этот контент содержится в span class = "tooltip". Я не хочу, чтобы содержимое диапазона «всплывающей подсказки» влияло на строки, которые становятся видимыми с помощью панели поиска. Может ли кто-нибудь посоветовать мне, как этого добиться? Большое спасибо, я очень ценю любую помощь.

Я думаю, что изменение должно произойти в части row.textContent приведенного ниже кода. Полный код также включен для контекста. 

        
            function _filter(row) {
            var input = document.getElementById("searchInput");
            var category = row.getElementsByTagName('td')[0].textContent;
            var filter = input.value.toUpperCase();
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : ((filter === '' || category.indexOf(filter) !== -1) && 'table-row'); 
                
        }

Вот полный javascript код 

    /*SEARCH AND CATEGORY FUNCTIONS */
        
    (function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

    var _input;
    var _select;

        /***** FUNCTION FOR SEARCH *****/
        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
                //write number of results returned
                 var x = $('tr:visible').length - 1;
                document.getElementById("demo").innerHTML = "Showing " + x + " results";
            });
        }
        
        
        /***** FUNCTION FOR CATEGORY (SELECT OPTION)*****/
        function _onSelectEvent(e) {
            _select = e.target;
            var tables = document.getElementsByClassName(_select.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filterSelect);
                });
                //write number of results returned
                 var x = $('tr:visible').length - 1;
                document.getElementById("demo").innerHTML = "Showing " + x + " results";
            });
        }
        
        
        /* filter search bar */
        
            function _filter(row) {
            var input = document.getElementById("searchInput");
            var category = row.getElementsByTagName('td')[0].textContent;
            var filter = input.value.toUpperCase();
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : ((filter === '' || category.indexOf(filter) !== -1) && 'table-row'); 
                
        }
    
        
        
        /* Filter search option drop down */
    
        function _filterSelect(row) {
     
            var text_select = row.getElementsByTagName('td')[0].textContent.toLowerCase(), val_select = _select.options[_select.selectedIndex].value.toLowerCase();
            row.style.display = text_select.indexOf(val_select) == -1 ? 'none' : 'table-row';
                    
        }
        
                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('light-table-filter');
                        var selects = document.getElementsByClassName('select-table-filter');
                        Arr.forEach.call(inputs, function(input) {
                            input.oninput = _onInputEvent;
                        });
                        Arr.forEach.call(selects, function(select) {
                 select.onchange  = _onSelectEvent;
                        });
                    }
                };
            })(Array.prototype);


            document.addEventListener('readystatechange', function() {
                if (document.readyState === 'complete') {
                    LightTableFilter.init();

                }
            });


        })(document);```
...