Question

我有一个包含20列和大约一千行的表。我想基于过滤器显示/隐藏不同的列，即每个过滤器显示与该过滤器相关的列，并隐藏不是的列。

我尝试了两种方法：

1）使用jQuery基于列的索引向TH和TD添加“hide”类。这非常慢，因为必须将类添加到要隐藏的每个表格单元格中。

2）在表格顶部的COLGROUP中的COL中添加一个“隐藏”类。这里的问题是，当诸如“display：none”或“visibility：collapse”之类的样式规则被添加到COL时，并非所有浏览器都将这些规则应用于表中的相应列，因为这些单元格不是COL的子项。

有什么建议吗？

Answer 1

要隐藏整列，您可以使用堆叠定义：

// HTML
<table id="my-table" class="no-filter">
  <tr>
    <td class="column column1">c1</td>
    <td class="column column2">c2</td>
    <td class="column column3">c3</td>
  </tr>
  // etc x1000
</table>

// CSS
table td.column { display: none; } /* by default all columns are hidden */
table.no-filter td.column { display: block; } /* no-filter shows _all_ columns */
table.filter1 td.column1 { display: block; }
table.filter2 td.column2 { display: block; }
table.filter3 td.column3 { display: block; }

如果您只想显示column1：

$("#my-table").removeClass("no-filter").addClass("filter1");

如果要显示column1 和 column3：

$("#my-table").removeClass("no-filter").addClass("filter1").addClass("filter3");

如果您需要一对多过滤器

table.filter4 td.column4,
table.filter4 td.column5,
table.filter4 td.column99 { display: block; }
/* filter 4 shows column 4 5 and 99 */

过滤器可以重叠：

table.filter5 td.column5 { display: block; }
table.filter6 td.column5,
table.filter6 td.column6 { display: block; }

这假定您的过滤器是预先定义的，并且您知道过滤器到列的映射。

次要注意：我没有对此进行测试，可能存在优先级问题。如果过滤器未正确应用，请将 td.columnX更改为td.column.columnX

Answer 2

在我看来，最简单的方法是在jQuery中使用以下CSS规则创建样式元素：

td:nth-child(n)
{
  display:none;
}

这是DEMO。

以下是您可以改进的示例代码我在这里创建了一个非常简单的示例：

var myStyle = 'td:nth-child(column_index){display:none;}', 
    $myStyleElement = $(document.createElement('style'));

$myStyleElement.attr('id', 'dynamic_style');
$('head').append($myStyleElement);

$('#hide_column').click(function(e){
    $('style#dynamic_style').html(myStyle.replace('column_index', '3'));
});

$('#show_column').click(function(e){
    $('style#dynamic_style').html('');
});

请注意，通过创建样式元素注意你强制使用浏览器自己渲染页面，它比任何javascript实现更优化的方式工作。我的意思是脚本中的元素没有迭代。但是我不知道浏览器里面发生了什么。

Answer 3

您可以将每列拆分为自己的表。然后，您可以在代表该列的整个表格上设置display: none，并隐藏该“列”。我猜这会表现得更好，虽然感觉相当hackish。

Answer 4

如何为所有列提供来自特定列的所有单元格：{1}}来自第1列的所有单元格等。class="column1"然后： $（”。COLUMN1' ）隐藏（）;

Answer 5

只需使用jquery循环所有trs并隐藏列似乎不像你们想象的那么慢......

这是我基于@ Phoenix的演示测试：

jsfiddle

这是隐藏和显示代码：

$('#hide_column').click(function(e){
    $("tr").each(function(){$(this).children(":eq(2)").hide();})
});

$('#show_column').click(function(e){
    $("tr").each(function(){$(this).children(":eq(2)").show();})
});

这段代码的表现甚至比@ Phoenix的答案更快，虽然我觉得他的答案看起来更好，但可能是我们想得太多了......

如何在很长的html表中隐藏列

5 个答案: