带有多个过滤器的过滤表

Question

我有以下javascript，它接受form元素的输入，并隐藏不符合搜索条件的表行。

<script>
    function wo_search(filter, column) {
        // Declare variables 
        var input, table, tr, td, i;
        input = document.getElementById("wo_search_type");
        table = document.getElementById("work_order");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[column];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

问题是，我的表有7个搜索词，而不仅仅是一个。 在我当前的代码中，一次只能使用1个过滤器。 选择一个过滤器后，它将在表格中隐藏正确的元素。 用户选择第二个过滤器后，第一个过滤器便会失效，基本上会再次显示该过滤器隐藏的所有数据，然后再应用从第二个所选项开始的过滤器。

如何使所有过滤器一起应用？

PS

这是根据输入的类型来调用过滤器功能的方式，其中包含常规文本输入和选择框。

选择框使用onchange="wo_search(this.value.toUpperCase(), 0)" ，第二个参数是表列ID。

输入文本使用onkeyup="wo_search(this.value.toUpperCase(), 0)" ，第二个参数是表列ID。

编辑：我不认为我在最初的帖子中很清楚，对此我深表歉意，但是我试图为表格过滤提供7 种不同的输入。

基本上，在表上，最顶部有一行（在标题上方），仅包含一个输入框（选择或文本输入），需要过滤该表的特定列。

每列都有自己的过滤器。 这是屏幕截图：

我认为使用jquery可能更容易，因此也欢迎使用jquery答案。

Answer 1

在说完我的原始答案的评论后，这就是我得到的。 请检查这是否是您需要的。

编辑

我忘记将要针对过滤器测试的文本小写，这导致了一些时髦的结果。

 document.addEventListener('DOMContentLoaded', function() { var filters = []; //the array of current filters; var table_data = document.querySelectorAll('#filter-me tbody tr'); //Gets all table rows in the filter me table //Adds an event listener to the filters list element document.querySelector('#filter-list').addEventListener('click', function(e) { if (!e.target.classList.contains('filter-item')) return false; var index = parseInt(e.target.getAttribute('data-index')); filters.splice(index, 1); update_filters(); run_filters(); }) function value_change(column, e) { var action = false; //No action has been run if (e.type == 'keypress') { //if the action type is keypress, check to see if we have hit enter AND the value is not empty if (e.keyCode == 13 && this.value != '') { filters.push({ column: column, filter: this.value.toLowerCase() }); //reset the value this.value = ''; //we have done something through this event, therefore we have action action = true; } } else if (e.type = 'change') { //If the event is change, simply push the column index + this select's value filters.push({ column: column, filter: this.value.toLowerCase() }); //Again, action is true action = true; } if (action) { //Since we have action, we need to update the filters list and run the filters against the table. update_filters(); run_filters(); } } //This line is sort of a mess: //create an empty array, call the slice method on it, binding it to the document.querySelectorAll('.column-filter') NodeList object //loop through each with the actual DOM node itself + it's index [].slice.call(document.querySelectorAll('.column-filter')).forEach((filter, i) => { filter.addEventListener(filter.tagName.toLowerCase() == 'input' ? 'keypress' : 'change', value_change.bind(filter, i)); //add the event listener to the correct type -- you may want to be more exact depending on your circumstances on this one to determine which event is added //Bind the value_change function to the element, but passing the first element as the index from the element of the nodelist. }); function update_filters() { document.querySelector('#filter-list').innerHTML = ""; //remove all elements; var els = filters.map((filter, i) => '<span class="filter-item" data-index="' + i + '">' + filter.filter + '</span>'); //creates a fake span item here document.querySelector('#filter-list').innerHTML = els.join(''); //joins everything with an empty space and sets the innerHTML to the result } // end update_filters function run_filters() { for (var i = 0, row, tds; row = table_data[i]; i++) { //get only the TD elements tds = row.querySelectorAll('td'); //in order for a row to run, every filter must match. var pass = filters.every(filter => { return tds[filter.column].innerText.toLowerCase().indexOf(filter.filter) != -1; //for the filter to match, the TD element in the corresponding column must contain the text }); row.style.display = pass ? '' : 'none'; //if pass, no display styles are added; otherwise, hide them. } } //end run_filters }); 

 #filter-list { display: inline-block; } #filter-list span.filter-item { display: inline-block; background-color: aqua; padding: 3px 6px; cursor: pointer; } #filter-list span.filter-item+span.filter-item { margin-left: 5px; } #filter-list span.filter-item::after { content: 'x'; margin-left: 4px; padding-left: 4px; border-left: 1px solid grey; } 

 <table id="filter-me" class="table"> <caption id="filter-list"></caption> <thead> <tr> <th> <select class="column-filter"> <option value="">&nbsp;</option> <option value="lorem">Lorem</option> <option value="illum">Illum</option> </select> </th> <th><input type="search" placeholder="Filter" class="column-filter"></th> <th><input type="search" placeholder="Filter" class="column-filter"></th> <th><input type="search" placeholder="Filter" class="column-filter"></th> <th><input type="search" placeholder="Filter" class="column-filter"></th> </tr> <tr> <th>Lorem, ipsum. <span class="arrow-up">&nbsp;</span></th> <th>Dolores, tempora?</th> <th>Tempore, soluta?</th> <th>Commodi, illum!</th> <th>Laudantium, debitis!</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet.</td> <td>Magni aspernatur eveniet amet. Eos.</td> <td>Doloribus numquam at nisi fuga.</td> <td>Exercitationem libero saepe iusto labore!</td> <td>Quod, debitis. Hic, eius voluptates?</td> </tr> <tr> <td>Excepturi aspernatur quia sequi labore.</td> <td>Ad tempore laudantium sed temporibus.</td> <td>Officia accusamus architecto perferendis quod?</td> <td>Laudantium facilis numquam quas iusto!</td> <td>Doloribus tenetur deleniti voluptatum alias.</td> </tr> <tr> <td>Ratione suscipit quis repudiandae ipsam!</td> <td>Repellendus blanditiis iure vel delectus.</td> <td>Sunt debitis voluptatum consectetur aliquam!</td> <td>Libero expedita odio maiores optio!</td> <td>Nam molestias delectus quam porro.</td> </tr> <tr> <td>Earum delectus sint ab error?</td> <td>Dicta ipsam facilis optio aliquam?</td> <td>Blanditiis eligendi sit ad accusamus?</td> <td>Sequi laborum illo eos incidunt?</td> <td>Necessitatibus iure sequi eaque quam!</td> </tr> <tr> <td>Illum aspernatur fuga laborum ratione!</td> <td>Maiores, excepturi! Dolorum, aspernatur mollitia.</td> <td>Labore corrupti itaque provident adipisci.</td> <td>Ipsum ducimus earum minus fuga.</td> <td>Necessitatibus rerum molestias autem libero.</td> </tr> <tr> <td>Nemo omnis similique labore minima!</td> <td>Dolore dolores saepe ea adipisci.</td> <td>Voluptate iusto in unde quas.</td> <td>Quod aperiam sit ut iusto.</td> <td>Quidem quisquam cupiditate dolor officiis.</td> </tr> <tr> <td>Officia numquam aliquam qui nulla.</td> <td>Laboriosam repellendus soluta aliquid similique.</td> <td>Veritatis, neque porro? Quae, quia?</td> <td>Magnam vel autem ad blanditiis!</td> <td>Laboriosam, a. Sunt, suscipit deserunt!</td> </tr> <tr> <td>Aspernatur iste saepe beatae nam.</td> <td>Ducimus quisquam corrupti quam inventore?</td> <td>Sit ullam minus possimus quidem!</td> <td>Officiis laborum laudantium veritatis et!</td> <td>Impedit dignissimos dolores maxime sequi.</td> </tr> <tr> <td>Neque similique cum sequi unde!</td> <td>Voluptatibus, ad? Ullam, facilis cumque.</td> <td>Enim in magnam id illo!</td> <td>Ex nobis quidem voluptatem voluptate.</td> <td>Eligendi esse ipsa ipsam omnis!</td> </tr> <tr> <td>Neque, fugit. Tempora, voluptates vel.</td> <td>Officia cupiditate dolores magni sunt?</td> <td>Eveniet tempore illo ipsa? Non.</td> <td>Possimus repellendus eligendi ipsam necessitatibus!</td> <td>Quisquam natus eos omnis ea.</td> </tr> <tr> <td>Aliquam voluptas recusandae et animi?</td> <td>Quis distinctio officiis quisquam dolores.</td> <td>Repellendus suscipit vero delectus hic.</td> <td>Quae asperiores temporibus impedit quis.</td> <td>Temporibus ipsa quidem magnam odio.</td> </tr> <tr> <td>Voluptatem optio quas nesciunt debitis!</td> <td>Hic mollitia alias laborum accusantium?</td> <td>Obcaecati eaque corrupti aperiam culpa!</td> <td>Voluptatum sequi sed numquam eos!</td> <td>Laborum exercitationem deleniti quaerat dolorem.</td> </tr> <tr> <td>Modi nam asperiores totam excepturi.</td> <td>Quod ipsa dolorem magni labore.</td> <td>Qui quidem quod eum quasi!</td> <td>Explicabo, ut eveniet. Quos, nam?</td> <td>Harum fugit sequi blanditiis accusamus.</td> </tr> <tr> <td>Ullam dolores vel natus in?</td> <td>Dolor velit dolorum quos error!</td> <td>Obcaecati blanditiis natus aperiam esse.</td> <td>Consequatur quasi qui minima laboriosam.</td> <td>Voluptatum, et atque. Iste, earum?</td> </tr> <tr> <td>Voluptate esse placeat doloribus hic?</td> <td>Dolorum velit ab incidunt quam.</td> <td>Laboriosam facere sed quia nisi.</td> <td>Saepe ex officia libero beatae?</td> <td>Ipsam ab distinctio assumenda itaque!</td> </tr> <tr> <td>Perferendis facere natus accusantium ut.</td> <td>Ipsam possimus dolores corporis totam!</td> <td>Ab officia rerum tempora ipsum.</td> <td>Id, soluta neque! Voluptatibus, id.</td> <td>Eaque enim fugiat corporis velit!</td> </tr> <tr> <td>Voluptatum cum atque eos quod.</td> <td>Esse corporis mollitia voluptatem ipsum.</td> <td>Corrupti unde inventore similique ad?</td> <td>Blanditiis dolorum molestiae minus tempore.</td> <td>Temporibus nihil doloremque quibusdam! Voluptatem!</td> </tr> <tr> <td>Iste voluptates iusto facilis cum?</td> <td>At est necessitatibus architecto repellendus?</td> <td>Officia qui soluta veniam nemo.</td> <td>Nobis cupiditate officiis reiciendis possimus.</td> <td>Voluptatibus quidem assumenda adipisci quis.</td> </tr> <tr> <td>Illum voluptatibus reprehenderit repellendus nostrum?</td> <td>Distinctio natus harum est nulla?</td> <td>Temporibus sit consequatur delectus ducimus.</td> <td>Veniam possimus qui fugiat temporibus.</td> <td>Delectus tenetur asperiores quasi perspiciatis.</td> </tr> <tr> <td>Quod atque ut doloribus libero?</td> <td>Animi assumenda praesentium alias accusantium!</td> <td>Labore ex optio eveniet architecto.</td> <td>Eaque delectus nemo fugiat dolorum.</td> <td>Atque, delectus. Obcaecati, saepe veritatis.</td> </tr> </tbody> </table> 

Answer 2

这是您的要求的尝试。 因此，以下代码将根据过滤后的结果进行过滤。 这意味着，当您在第一个输入中输入内容时，它将根据该内容过滤结果。 然后，当您在第二个输入中输入内容时，它将从上述结果中过滤出结果。 因此，结果一旦被隐藏，就不会在下一组搜索中考虑。

为了重置，清除所有输入/下拉菜单，您应该能够再次看到所有记录。

 $(".column-filter").on('change input', function() { var emptyFields = $('.column-filter').filter(function() { return $.trim(this.value) === ""; }); if (emptyFields.length == $(".column-filter").length) { $('table tbody tr').each(function() { $(this).show(); }); } else { var columnNumber = this.id; var enteredValue = $(this).val(); $('table tbody tr:visible').each(function() { var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text(); if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) { $(this).hide(); } else { $(this).show(); } }); } }); 

 #filter-list { display: inline-block; } #filter-list span.filter-item { display: inline-block; background-color: aqua; padding: 3px 6px; cursor: pointer; } #filter-list span.filter-item+span.filter-item { margin-left: 5px; } #filter-list span.filter-item::after { content: 'x'; margin-left: 4px; padding-left: 4px; border-left: 1px solid grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="filter-me" class="table"> <caption id="filter-list"></caption> <thead> <tr> <th> <select id='0' class="column-filter"> <option value="">&nbsp;</option> <option value="Lorem">Lorem</option> <option value="Illum">Illum</option> </select> </th> <th><input type="search" placeholder="Filter" class="column-filter" id="1"></th> <th><input type="search" placeholder="Filter" class="column-filter" id="2"></th> <th><input type="search" placeholder="Filter" class="column-filter" id="3"></th> <th><input type="search" placeholder="Filter" class="column-filter" id="4"></th> </tr> <tr> <th>Lorem, ipsum. <span class="arrow-up">&nbsp;</span></th> <th>Dolores, tempora?</th> <th>Tempore, soluta?</th> <th>Commodi, illum!</th> <th>Laudantium, debitis!</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet.</td> <td>Magni aspernatur eveniet amet. Eos.</td> <td>Doloribus numquam at nisi fuga.</td> <td>Exercitationem libero saepe iusto labore!</td> <td>Quod, debitis. Hic, eius voluptates?</td> </tr> <tr> <td>Excepturi aspernatur quia sequi labore.</td> <td>Ad tempore laudantium sed temporibus.</td> <td>Officia accusamus architecto perferendis quod?</td> <td>Laudantium facilis numquam quas iusto!</td> <td>Doloribus tenetur deleniti voluptatum alias.</td> </tr> <tr> <td>Ratione suscipit quis repudiandae ipsam!</td> <td>Repellendus blanditiis iure vel delectus.</td> <td>Sunt debitis voluptatum consectetur aliquam!</td> <td>Libero expedita odio maiores optio!</td> <td>Nam molestias delectus quam porro.</td> </tr> <tr> <td>Earum delectus sint ab error?</td> <td>Dicta ipsam facilis optio aliquam?</td> <td>Blanditiis eligendi sit ad accusamus?</td> <td>Sequi laborum illo eos incidunt?</td> <td>Necessitatibus iure sequi eaque quam!</td> </tr> <tr> <td>Illum aspernatur fuga laborum ratione!</td> <td>Maiores, excepturi! Dolorum, aspernatur mollitia.</td> <td>Labore corrupti itaque provident adipisci.</td> <td>Ipsum ducimus earum minus fuga.</td> <td>Necessitatibus rerum molestias autem libero.</td> </tr> <tr> <td>Nemo omnis similique labore minima!</td> <td>Dolore dolores saepe ea adipisci.</td> <td>Voluptate iusto in unde quas.</td> <td>Quod aperiam sit ut iusto.</td> <td>Quidem quisquam cupiditate dolor officiis.</td> </tr> <tr> <td>Officia numquam aliquam qui nulla.</td> <td>Laboriosam repellendus soluta aliquid similique.</td> <td>Veritatis, neque porro? Quae, quia?</td> <td>Magnam vel autem ad blanditiis!</td> <td>Laboriosam, a. Sunt, suscipit deserunt!</td> </tr> <tr> <td>Aspernatur iste saepe beatae nam.</td> <td>Ducimus quisquam corrupti quam inventore?</td> <td>Sit ullam minus possimus quidem!</td> <td>Officiis laborum laudantium veritatis et!</td> <td>Impedit dignissimos dolores maxime sequi.</td> </tr> <tr> <td>Neque similique cum sequi unde!</td> <td>Voluptatibus, ad? Ullam, facilis cumque.</td> <td>Enim in magnam id illo!</td> <td>Ex nobis quidem voluptatem voluptate.</td> <td>Eligendi esse ipsa ipsam omnis!</td> </tr> <tr> <td>Neque, fugit. Tempora, voluptates vel.</td> <td>Officia cupiditate dolores magni sunt?</td> <td>Eveniet tempore illo ipsa? Non.</td> <td>Possimus repellendus eligendi ipsam necessitatibus!</td> <td>Quisquam natus eos omnis ea.</td> </tr> <tr> <td>Aliquam voluptas recusandae et animi?</td> <td>Quis distinctio officiis quisquam dolores.</td> <td>Repellendus suscipit vero delectus hic.</td> <td>Quae asperiores temporibus impedit quis.</td> <td>Temporibus ipsa quidem magnam odio.</td> </tr> <tr> <td>Voluptatem optio quas nesciunt debitis!</td> <td>Hic mollitia alias laborum accusantium?</td> <td>Obcaecati eaque corrupti aperiam culpa!</td> <td>Voluptatum sequi sed numquam eos!</td> <td>Laborum exercitationem deleniti quaerat dolorem.</td> </tr> <tr> <td>Modi nam asperiores totam excepturi.</td> <td>Quod ipsa dolorem magni labore.</td> <td>Qui quidem quod eum quasi!</td> <td>Explicabo, ut eveniet. Quos, nam?</td> <td>Harum fugit sequi blanditiis accusamus.</td> </tr> <tr> <td>Ullam dolores vel natus in?</td> <td>Dolor velit dolorum quos error!</td> <td>Obcaecati blanditiis natus aperiam esse.</td> <td>Consequatur quasi qui minima laboriosam.</td> <td>Voluptatum, et atque. Iste, earum?</td> </tr> <tr> <td>Voluptate esse placeat doloribus hic?</td> <td>Dolorum velit ab incidunt quam.</td> <td>Laboriosam facere sed quia nisi.</td> <td>Saepe ex officia libero beatae?</td> <td>Ipsam ab distinctio assumenda itaque!</td> </tr> <tr> <td>Perferendis facere natus accusantium ut.</td> <td>Ipsam possimus dolores corporis totam!</td> <td>Ab officia rerum tempora ipsum.</td> <td>Id, soluta neque! Voluptatibus, id.</td> <td>Eaque enim fugiat corporis velit!</td> </tr> <tr> <td>Voluptatum cum atque eos quod.</td> <td>Esse corporis mollitia voluptatem ipsum.</td> <td>Corrupti unde inventore similique ad?</td> <td>Blanditiis dolorum molestiae minus tempore.</td> <td>Temporibus nihil doloremque quibusdam! Voluptatem!</td> </tr> <tr> <td>Iste voluptates iusto facilis cum?</td> <td>At est necessitatibus architecto repellendus?</td> <td>Officia qui soluta veniam nemo.</td> <td>Nobis cupiditate officiis reiciendis possimus.</td> <td>Voluptatibus quidem assumenda adipisci quis.</td> </tr> <tr> <td>Illum voluptatibus reprehenderit repellendus nostrum?</td> <td>Distinctio natus harum est nulla?</td> <td>Temporibus sit consequatur delectus ducimus.</td> <td>Veniam possimus qui fugiat temporibus.</td> <td>Delectus tenetur asperiores quasi perspiciatis.</td> </tr> <tr> <td>Quod atque ut doloribus libero?</td> <td>Animi assumenda praesentium alias accusantium!</td> <td>Labore ex optio eveniet architecto.</td> <td>Eaque delectus nemo fugiat dolorum.</td> <td>Atque, delectus. Obcaecati, saepe veritatis.</td> </tr> </tbody> </table>