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>