Javascript html高效可伸缩表列

我试图创建一个带有可伸缩列的动态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元素使用Hiddeable类 以及类似于：

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

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

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

上述解决方案有效，但效率非常低，而且看起来不太干净

添加了简化的JSFIDLE示例。我们的想法是不要让标题1和标题2同时展开

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

好的，我让希望成为你想要的

基本上你应该关注这一点：

• 将标题及其子列指定为同一类
• 为要切换的标题设置colspan属性
• 为每个标题设置一个数据完整列属性，以跟踪其最大列跨度
• 绑定到单击事件仅具有colspan属性的列
• 为那些您希望保持可见的列指定一个头等舱
• 单击事件隐藏其类不等于单击标题且没有第一个类的所有列
• 将所有其他收割台colspan设置为1
• 切换与您单击的标题具有相同类别的所有列
• 要切换标题的colspan，请将colspan设置为（data fullcol-colspan+1）

---

<强> NB:只有当头有单类时才会这样做，如果你想给他们一个以上的类，考虑把“重要类”保存在一个特定的属性中，比如数据类< /强>

ps：在使用最新的jQuery版本之后，性能有了很大的提高，这看起来正是我所要寻找的，谢谢！在我接受答案之前，让我应用它，并针对我的案例进行测试，看看这是否正确。在我的实际数据表上起到了处理作用。我只添加了$（function（）{$（'td:not（.first）：not（.classic））.hide（）$（'th:not（.classic））.attr（'colspan'，1）}）；只需加载一列展开的页面！