Question

我有一张桌子：

<table class="tablesorter" id="mytable">
  <thead>
    <th>ID</th><th>Title</th><th>Description</th>
  </thead>
  <tr>
    <td onclick="showRowBelow()">1</td><td>Test1</td><td>Desc1</td>
  </tr> 
  <tr style="display:none">
    <td colspan="3" style="padding: 0 0 0;border:0px">Inserted after click</td>
  </tr>
  <tr>
    <td onclick="showRowBelow()">2</td><td>Test1</td><td>Desc1</td>
  </tr> 
  <tr style="display:none">
    <td colspan="3" style="padding: 0 0 0;border:0px">Inserted after click</td>
  </tr>
  <tr>
    <td onclick="showRowBelow()">3</td><td>Test1</td><td>Desc1</td>
  </tr>
  <tr style="display:none">
    <td colspan="3" style="padding: 0 0 0;border:0px">Inserted after click</td>
  </tr>
  <tr>
    <td onclick="showRowBelow()">4</td><td>Test1</td><td>Desc1</td>
  </tr>
  <tr style="display:none">
    <td colspan="3" style="padding: 0 0 0;border:0px">Inserted after click</td>
  </tr>
</table>

在此表中，我添加了带有集成过滤器插件（http://mottie.github.io/tablesorter/docs/）的jQuery tablesorter：

<script type='text/javascript'>var $j = jQuery.noConflict();</script>

$j(document).ready(function() {
    $j("#mytable").tablesorter({
         theme: 'blue',

        widgets: ["", "filter"],

        widgetOptions : {
          filter_childRows : false,     

          filter_columnFilters : true,      

          filter_cssFilter : 'tablesorter-filter',

          filter_filteredRow   : 'filtered',

          filter_formatter : null,

          filter_functions : null,

          filter_hideFilters : false, // true, (see note in the options section above)

          filter_ignoreCase : true,

          filter_liveSearch : true,

          filter_reset : 'button.reset',

          filter_searchDelay : 100,

          filter_serversideFiltering: false,        

          filter_startsWith : false,        

          filter_useParsedData : false

          }
       });
});

问题

是否可以使用样式属性排除所有表行＆＃34; display：none＆＃34;？这些行必须始终不可见，直到点击表格单元格为＆＃39; ID＆＃39;内容已经完成。

此时这些不可见的行被过滤，因此在输入过滤器字段中键入字符时也会显示。

好吧，我可以注册一个在过滤器操作后触发的事件，我可以将样式更改为＆＃34; display：none＆＃34;再次为这些行。但我认为这不是一个好的解决方案（性能等）。

Answer 1

要使过滤器小部件忽略子行内容，您需要添加一个类名称＆＃34; tablesorter-childRow＆＃34; （由cssChildRow option修改）：

<tr class="tablesorter-childRow" style="display:none">
  <td colspan="3" style="padding: 0 0 0;border:0px">Inserted after click</td>
</tr>

查看this demo。

忽略使用jQuery tablesorter过滤的表行

1 个答案: