如何使用jQuery在具有两个选择框值的表中执行过滤操作

how to perform filter operation in table with two select box value using jQuery?

本文关键字：选择操作过滤执行两个 jQuery 何使用更新时间：2023-09-26

我有两个选择框。其中包含姓名和主题…并且还有一个3列的表。它们是name, subject, marks。我想根据这两个选择框的值来过滤那些表的值。

my code

<select id="first">
    <option>Show all</option>
    <option>raja</option>
    <option>john</option>
</select>
<select id="second">
    <option>Show all</option>
    <option>english</option>
    <option>tamil</option>
</select>
<table border="1" id="test">
    <thead>
        <th>Name</th>
        <th>subject</th>
        <th>mark</th>
    </thead>
    <tbody>
    <tr>
        <td>raja</td>
        <td>english</td>
        <td>85</td>
   </tr>
 <tr>
        <td>raja</td>
        <td>tamil</td>
        <td>80</td>
   </tr>
         <tr>
        <td>john</td>
        <td>english</td>
        <td>95</td>
   </tr>
         <tr>
        <td>john</td>
        <td>tamil</td>
        <td>90</td>
   </tr>
    </tbody>
</table>

jQuery

$('#first').change(function() {
            var val= $(this).val();
              $('#test').each(function() {
                  if($('#test tr > td:contains('+val+')'))
                  {
                      $(this).parent().show();
                  }
                  else
                  {                          
                 $(this).parent().hide();
                  }
             });
        });

朋友们检查一下这段代码演示 js

var str=""
$('#first, #second').on('change',function(){
    var rows = $('#test tr:not(:first)');
    rows.hide();
    var sub = $("#second").val();
    var select= $('#first').val();
    if (select == "Show all" && sub == "Show all"){
        rows.show();
    }
    else if (sub == "Show all"){
        if (select != "Show all") str=":contains('" + select + "')"
        else str=""
    }else if (select == "Show all"){
        if (sub != "Show all") str=":contains('" + sub + "')"
        else str=""
    }else{
        str=":contains('" + sub + "'):contains('" + select + "')"
    }
    rows.filter(str).show();
    console.log(sub, select,str);
});

检查Demo Fiddle

$('#first').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();
    rows.filter(":contains('" + select + "')").show();
});
$('#second').on('change',function(){
    var rows = $('#test tr:not(:first)');
    var select = $(this).val();
    rows.hide();
    rows.filter(":contains('" + select + "')").show();
});