jQuery live过滤，如何在匹配时返回整行？

Question

我正在使用jQuery live filter插件在整个表上进行即时搜索。该插件工作正常，但它过滤细胞，我想搜索整行（tr）匹配，而不是一个单元格。

HTML：

<h2 class="sub-header">List of Enabled Alarms</h2> 
      <div id="prefetch"> 
       <input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search"> 
      </div> 
     <div class="table-responsive"> 
     <table class="table table-striped" id="alarm-table"> 
      <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Due Date</th> 
       <th>Creation Date</th> 
       <th>Frequency</th> 
       <th>Enabled</th> 
       <th>Actions</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>60</td> 
        <td>Alarm dev test</td> 
        <td>29-12-2015</td> 
        <td>28-12-2015</td> 
        <td>ExactTime</td> 
        <td>Enabled</td> 
        <td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td> 
       </tr> 
       <tr> 
        <td>61</td> 
        <td>Testing email</td> 
        <td>05-01-2016</td> 
        <td>04-01-2016</td> 
        <td>ExactTime</td> 
        <td>Enabled</td> 
        <td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td> 
       </tr> 
      </tbody> 
     </table> 

JAVASCRIPT：

<script type="text/javascript"> 
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', { 
     filterChildSelector: 'tr' 
    }); 
</script> 

此代码的结果是部分行的信息。如果我编写a，它将按照我的预期返回所有匹配但不是整行的单元。如果可能，我只想按列name搜索。

Answer 1

按照这plugin您可以通过筛选函数匹配元素。所以请尝试下面的代码

<script type="text/javascript"> 
    $('#alarm-table').liveFilter('#alarm-search', 'tbody tr', { 
     filter: function(el, val){ 
      return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0; 
     } 
    }); 
</script> 

或者，如果您可以给包含闹钟名称的单元格添加任何类名称，则会更好。在这种情况下，你的HTML如下：

<h2 class="sub-header">List of Enabled Alarms</h2> 
      <div id="prefetch"> 
       <input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search"> 
      </div> 
     <div class="table-responsive"> 
     <table class="table table-striped" id="alarm-table"> 
      <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Due Date</th> 
       <th>Creation Date</th> 
       <th>Frequency</th> 
       <th>Enabled</th> 
       <th>Actions</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>60</td> 
        <td class="alarmName">Alarm dev test</td> 
        <td>29-12-2015</td> 
        <td>28-12-2015</td> 
        <td>ExactTime</td> 
        <td>Enabled</td> 
        <td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td> 
       </tr> 
       <tr> 
        <td>61</td> 
        <td class="alarmName">Testing email</td> 
        <td>05-01-2016</td> 
        <td>04-01-2016</td> 
        <td>ExactTime</td> 
        <td>Enabled</td> 
        <td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td> 
       </tr> 
      </tbody> 
     </table> 

，并使用下面的脚本：

<script type="text/javascript"> 
    $('#alarm-table').liveFilter('#alarm-search', 'tbody tr', { 
     filter: function(el, val){ 
      return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0; 
     } 
    }); 
</script>