javascript - jQuery 实时过滤，匹配时如何返回整行？

Question

我正在使用 jQuery 实时过滤器插件对整个表格进行即时搜索。该插件工作正常，但它按单元格进行过滤，我想搜索整个行 (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 ，它会返回所有匹配的单元格，但不会像我预期的那样返回整个行。如果可能的话，我只想按列名称进行搜索。

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>