使用多个过滤器过滤表行

Question

我有一个包含几行和几列的表格，以及一组搜索字段。 我希望能够显示/隐藏与搜索字段匹配/不匹配的行。 每个字段都与表的一列相关。 我在这项任务中取得了部分成功，因为过滤正确完成了（如您在此处看到的）。 但是，我想修复两件事。

• 首先，jQuery脚本还隐藏了表头。
• 其次，我希望能够在键入时过滤行。 例如 如果我在名称框中仅输入“ J”，则所有内容都会消失，因为没有名称为“ J”的行。 但是，我们有可能匹配的“詹姆斯”和“杰米”。 我希望保留它们直到输入完整的名称。 我尝试使用s1.localeCompare(s2) （ 在此处链接）进行操作，但是它不起作用。

顺便说一句，无需担心大写/小写键入。 我实际上在原始代码中处理了它，但是在这里尝试使其简单。

这里的代码：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            table = $("#MI6"); //set table name
            search_field = new Object();
            ///we create it as an object, initially empty
            $('.search-key').on('change keyup paste', function () {
                search_field['name']      = $( "#name" ).val();
                search_field['lastname']  = $("#lastname").val();
                search_field['number']    = $("#number").val();

                table.find('tr').each(function () {
                    current_row = $(this); //keep track of the row being checked, iterate through it's cells
                    var display = 0;
                    current_row.show();
                    $(this).find('td').each(function() {
                    //when we stumble upon the data used as a search criteria
                        cell_value = $(this).html(); //gets the value of the cell being checked
                        if (cell_value == search_field[this.id] || search_field[this.id] == '') {
                            display++;    
                        }
                    });
                    if (display < 3) {
                        current_row.hide(); //if this cell is a match, or we no longer want to use it as a search criteria, the row is displayed
                    }
                });

            });   
        });
        </script>
    </head>
    <body>
        <input type="text" id="name" class="search-key" placeholder="name">
        <input type="text" id="lastname" class="search-key" placeholder="lastname">
        <input type="number" id="number" class="search-key" placeholder="number">
        <p></p>
        <table id="MI6">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Number</th>
            </tr>
            <tr>
                <td id="name">James</td>
                <td id="lastname">Bond</td> 
                <td id="number">7</td>
            </tr>
            <tr>
                <td id="name">Vesper</td>
                <td id="lastname">Lynd</td> 
                <td id="number">6</td>
            </tr>
            <tr>
                <td id="name">Rene</td>
                <td id="lastname">Mathis</td> 
                <td id="number">5</td>
            </tr>
    </table>
    </body>
</html>

Answer 1

要回答您的第一个问题，只需使用.not(':first')从集合中省略表的第一行：

table.find('tr').not(':first')

为了进行部分字符串匹配，可以使用indexOf() 。

indexOf（）方法返回指定值首次出现的调用String对象内的索引，从fromIndex开始搜索。 如果找不到该值，则返回-1。

我注意到您可以在标记中重复ID，它们必须是唯一的。

只需对标记进行一些小的更改，就可以将脚本重写为更具动态性：

<td data-input="name">Rene</td>
<td data-input="lastname">Mathis</td> 
<td data-input="number">5</td>

然后，您可以使用data-input来定位相应的input 。 您可以将其与jQuery的filter()方法结合使用以返回匹配的行：

/* $rows = table.find('tr').not(':first') */
$rows.hide().filter(function() {

  return $(this).find('td').filter(function() {

    var tdText = $(this).text().toLowerCase(),
        inputValue = $('#' + $(this).data('input')).val().toLowerCase();

    return tdText.indexOf(inputValue) != -1;

  }).length == $(this).find('td').length;

}).show();

上面的内容首先隐藏了每一行，然后进行了过滤。 在其中，对每个包含的td进行过滤，将其文本与相应input的值进行比较。 如果找到匹配项，则返回td 。 然后，它对照该行中td元素的数量检查匹配的td元素的数量，如果它们相同，则所有字段都包含部分匹配项，并返回整行。 最后，然后显示任何匹配的行。

这种方式将允许您添加更多的输入和tds，而无需修改代码。 您只需要在输入上设置id ，然后将相应的data-input添加到td元素即可。

这是一个完整的例子

Answer 2

这可能有帮助

 $('.filter').change(function(){ filter_function(); //calling filter function each select box value change }); $('table tbody tr').show(); //intially all rows will be shown function filter_function(){ $('table tbody tr').hide(); //hide all rows var companyFlag = 0; var companyValue = $('#filter-company').val(); var contactFlag = 0; var contactValue = $('#filter-contact').val(); var rangeFlag = 0; var rangeValue = $('#filter-range').val(); var rangeminValue = $('#filter-range').find(':selected').attr('data-min'); var rangemaxValue = $('#filter-range').find(':selected').attr('data-max'); //setting intial values and flags needed //traversing each row one by one $('table tr').each(function() { if(companyValue == 0){ //if no value then display row companyFlag = 1; } else if(companyValue == $(this).find('td.company').data('company')){ companyFlag = 1; //if value is same display row } else{ companyFlag = 0; } if(contactValue == 0){ contactFlag = 1; } else if(contactValue == $(this).find('td.contact').data('contact')){ contactFlag = 1; } else{ contactFlag = 0; } if(rangeValue == 0){ rangeFlag = 1; } //condition to display rows for a range else if((rangeminValue <= $(this).find('td.range').data('min') && rangemaxValue > $(this).find('td.range').data('min')) || ( rangeminValue < $(this).find('td.range').data('max') && rangemaxValue >= $(this).find('td.range').data('max'))){ rangeFlag = 1; } else{ rangeFlag = 0; } console.log(rangeminValue +' '+rangemaxValue); console.log($(this).find('td.range').data('min') +' '+$(this).find('td.range').data('max')); if(companyFlag && contactFlag && rangeFlag){ $(this).show(); //displaying row which satisfies all conditions } }); } 

 <html> <head> </head> <body> <select id="filter-company" class="filter"> <option value="0">No value</option> <option value="Alfreds">Alfreds</option> <option value="Centro">Centro</option> <option value="Ernst">Ernst</option> <option value="Island">Island</option> <option value="Laughing">Laughing</option> <option value="Magazzini">Magazzini</option> </select> <select id="filter-contact" class="filter"> <option value="0">No value</option> <option value="Maria Anders">Maria Anders</option> <option value="Francisco Chang">Francisco Chang</option> <option value="Roland Mendel">Roland Mendel</option> </select> <select id="filter-range" class="filter"> <option value="0" data-min="1" data-max="1" >No value</option> <option value="£100,000 - £200,000" data-min="100000" data-max="200000" >£100,000 - £200,000</option> <option value="£200,000 - £300,000" data-min="200000" data-max="300000" >£200,000 - £300,000</option> <option value="£300,000 - £400,000" data-min="300000" data-max="400000" >£300,000 - £400,000</option> <option value="£400,000 - £500,000" data-min="400000" data-max="500000" >£400,000 - £500,000</option> </select> <!-- ^^ range select box contains data-max and data-min which will be used to compare ranges --> <h2>HTML Table</h2> <table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Range</th> </tr> </thead> <tr> <tbody> <td class="company" data-company="Alfreds">Alfreds</td> <!-- Data attributes helps in fetching values but you can fetch value of text in td also --> <td class="contact" data-contact="Maria Anders">Maria Anders</td> <td class="range" data-min="200000" data-max="300000">£200,000 - £300,000</td> <!-- here Data attributes are necessary as we need separate min max values --> </tr> <tr> <td class="company" data-company="Centro">Centro</td> <td class="contact" data-contact="Francisco Chang">Francisco Chang</td> <td class="range" data-min="100000" data-max="200000">£100,000 - £200,000</td> </tr> <tr> <td class="company" data-company="Alfreds" >Alfreds</td> <td class="contact" data-contact="Roland Mendel">Roland Mendel</td> <td class="range" data-min="200000" data-max="300000">£200,000 - £300,000</td> </tr> <tr> <td class="company" data-company="Centro" >Centro</td> <td class="contact" data-contact="Helen Bennett">Helen Bennett</td> <td class="range" data-min="100000" data-max="200000">£100,000 - £200,000</td> </tr> <tr> <td class="company" data-company="Laughing">Laughing</td> <td class="contact" data-contact="Yoshi Tannamuri">Yoshi Tannamuri</td> <td class="range" data-min="200000" data-max="300000">£200,000 - £300,000</td> </tr> <tr> <td class="company" data-company="Laughing">Laughing</td> <td data-contact="Giovanni Rovelli">Giovanni Rovelli</td> <td class="range" data-min="150000" data-max="250000">£150,000 - £250,000</td> </tr> </tbody> </table> </body> </html> 

https://codepen.io/sumitmangela/pen/NzZpzQ