Question

我有一个基本表，并希望通过几个过滤器过滤表行。

<select id="location">
   <option value="New York">New York</option>                             
   <option value="LA">LA</option> 
   <option value="Boston">Boston</option>  
</select>
<select id="last-name">
    <option>Last name</option>
    <option value="ABCDE">A-E</option>
    <option value="FGHIJ">F-J</option>
    <option value="KLMNO">K-O</option>   
    <option value="PQRST">P-T</option>
    <option value="UVWXYZ">U-Z</option>   
</select>
<table id="personnel">
    <thead>
       <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Location</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td class="firstname">Abel</td>
          <td class="lastname">Alpha</td>
          <td class="location">LA</td>
       </tr>
       <tr>
          <td class="firstname">Benny</td>
          <td class="lastname">Bravo</td>
          <td class="location">New York</td>
       </tr>
       <tr>
          <td class="firstname">Cindy</td>
          <td class="lastname">Charlie</td>
          <td class="location">Boston</td>
       </tr> 
   <tbody>
</table>

第一个过滤器我认为我可以这样做：

$(function() {    
    $('#location').change(function() { 
        $("#personnel td.location:contains('" + $(this).val() + "')").parent().show();
        $("#personnel td.location:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});

但是使用第一个字母过滤器我需要一些帮助。

Answer 1

试试这个

$('#last-name').change(function() {
    var curr = $(this).val();
    $("#personnel td.lastname").each(function(){
        if(curr.indexOf($(this).text().substr(0,1)) != -1){  //Check if first letter exists in the drop down value
             $(this).parent().show();

        }else{
             $(this).parent().hide();
        }
    });

});

请参阅working fiddle

我相信这可以改进得更强大，但它应该让你开始

Answer 2

$('#last-name').change(function() {
    var val = this.value;

    // with a single chain
    $("#personnel td.lastname")
        .parent()
        .hide()
        .end()  // jump to td.lastname
        .filter(function() {
            var firstChar = $(this).text()[0]; // pick first character
            return val.indexOf(firstChar) >= 0;
        })
        .parent()
        .show();
});

的 The demo 的

Jquery - 按单元格内容首字母过滤表

2 个答案: