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

您可以使用select元素的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元素的更改事件：

$(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

varAcols <- sort(grep('varA', names(df), value = TRUE))
varBcols <- sort(grep('varB', names(df), value = TRUE))
df[sub('A', 'C', varAcols)] <- df[varAcols]/df[varBcols]

#    id    varA.t1 varA.t2 varB.t1 varB.t2 varC.t1 varC.t2
#  <chr>   <dbl>   <dbl>   <dbl>   <dbl>   <dbl>   <dbl>
#1 row_1       5      10       2       4     2.5    2.5 
#2 row_2      20      50       4       6     5      8.33

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

2 个答案: