html高效可伸缩表列

Question

我正在尝试创建一个带有可伸缩列的动态html表。在实际情况下，我可以有20列每个标题和最多400个值。我想这样呈现数据：

-----------------------------------------------------------
|    |            Header 1          | Header 2 | Header 3 |
-----------------------------------------------------------
|val1| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|val2| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1| foot1.2|...| foot1.x| foot2.1  | foot3.1  |
-----------------------------------------------------------

我希望能够点击和colx.1，展开或显示同一标题下的所有列，折叠（或隐藏）其他标题的其他列。在上表中单击任何COL2.1单元格，然后将该表更改为：

-----------------------------------------------------------
|    | Header 1 |            Header 2          | Header 3 |
-----------------------------------------------------------
|val1| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|val2| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1  | foot2.1| foot2.2|...| foot2.x| foot3.1  |
-----------------------------------------------------------

我试着做了这样的事情：在所有可以显示/隐藏的td元素上使用hideable类，并且做了这样的事情：

var rows = $('tr');
rows.find('th:eq(1), td:eq(1)').on('click', function() {
    $('.hideable').toggle()
});

我还需要相应地更改页眉和页脚的colspan

('th#foot1.1').attr('colspan',1)

上面的解决方案起作用，但效率很低，看起来也不是很干净。

添加了简化的jsFiddle示例jsfidle.net/yrmsx。这样做的目的是不要同时展开标题1和标题2。

有没有更好、更有效的方法来实现这一点？

Answer 1

好吧，我做了这把小提琴，希望就是你要找的。

基本上你应该专注于这一点：

• 赋予头及其子列相同的类
• 为要切换的头设置colspan属性
• 为每个标头设置data-fullcol属性，以跟踪它们的最大colspan
• 仅将那些具有colspan属性的列绑定到click event
• 对要保持可见的列进行第一类排序
• 在click事件上隐藏其类不等于所单击标头的类且也没有第一类的所有列
• 将所有其他标头colspan设置为1
• 切换与您单击的标题具有相同类的所有列
• 要切换标头的colspan，请将colspan设置为(data-fullcol-colspan+1)

注意：这只适用于头文件只有一个类的情况，如果你想给它们一个以上的类，考虑把“重要的类”保存在一个特定的属性中，比如data-class