使用 jQuery 的下拉列列表过滤 html 表

Question

我有一个 jQuery 脚本，可以过滤具有许多列的 html 表，我只需要能够根据用户输入显示所有行，但只希望表的过滤应该通过用户选择的特定列下拉列表

jQuery 代码

$(document).ready(function(){
   $("#kwd_search").keyup(function(){
      var term=$(this).val()
      if( term != "")
      {
        $("#my-table tbody>tr").hide();
        $("#my-table td").filter(function(){
               return $(this).text().toLowerCase().indexOf(term ) >-1
        }).parent("tr").show();
       $("#my-table tbody>tr th").show();
      }
      else
      {
        $("#my-table tbody>tr").show();
      }
   });
});

HTML 代码

<select id="clmn_name">
 <option>Column 1</option>
 <option>Column 2</option>
 <option>Column 3</option>
</select>

<input id="kwd_search" placeholder="Search Me">

<table id="my-table">
 <thead>
  <tr>
     <th>Column 1</th>
     <th>Column 2</th>
     <th>Column 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Mango</td>
  </tr>

  <tr>
     <td>Strawberry</td>
     <td>Banana</td>
     <td>Cherry</td>
  </tr>
 </tbody>
</table>

那么如何根据用户选择的表格列过滤返回的HTML代码呢？

Answer 1

您可以使用选择元素的selectedIndex 属性来过滤目标单元格：

$("#kwd_search").keyup(function () {
    var index = $('#clmn_name').prop('selectedIndex'),
        term = $.trim(this.value);

    if (term.length === 0) {
        $("#my-table tbody > tr").show();
        return;
    }

    $("#my-table tbody > tr").hide().filter(function () {
        return this.cells[index].textContent.toLowerCase().indexOf(term) > -1;
    }).show();

});

如果你想监听 select 元素的 change 事件：

$(document).ready(function () {
    // Caching the elements and binding handlers
    var $s = $('#clmn_name').on('change', filterRows),
        $i = $("#kwd_search").on('keyup', filterRows),
        $rows = $("#my-table tbody > tr");

    function filterRows() {
        var ind = $s.prop('selectedIndex'),
            term = $.trim($i.val().toLowerCase());

        if (term.length === 0) return $rows.show();

        $rows.hide().filter(function () {
            return this.cells[ind].textContent.toLowerCase().indexOf(term) > -1;
        }).show();

    };
});

http://jsfiddle.net/jaeq6v0u/

jQuerish 选择目标单元格的方法是：

return $('td', this).eq(index).text().toLowerCase().indexOf(term) > -1;

Answer 2

$(document).ready(function () {
            $('#Searchtxt').on('input', function (e) {
                var value = $(this).val().toLowerCase();
        var columnIndex=0;
                $("#dataTableBody tr").filter(function () {
                    $(this).toggle($(this).children(":eq(" + columnIndex + ")").text().toLowerCase().indexOf(value) >`enter code here` -1)
                });
            });
        });