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

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

我尝试了两种方法：

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

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

有什么建议？

Answer 1

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

// HTML  // etc x1000 
 
 
c1
 
c2
 
c3
 
 // 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"); 

如果您需要一对多filter

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

filter可以重叠：

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

---

假设您的filter是预定义的，并且您知道filter到列的映射。

次要注意：我没有对此进行测试，可能存在优先级问题。 如果filter未正确 td.columnX ， td.column.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 ，并隐藏“column”。 我猜这会表现得更好，虽然它感觉相当hackish。

Answer 4

如果要为所有列提供来自特定列的所有单元格，那么如何为class="column1"列中的所有单元格提供class="column1" 。 然后：$（’。column1’）。hide（）;

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的答案更快，虽然我觉得他的答案看起来更好，但可能是我们想得太多了……