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元素上使用可隐藏类和类似的东西：

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

我还需要使用

相应地更改页眉和页脚的colspan

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

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

添加了简化的jsFiddle示例jsfiddle.net/yrMsX。我们的想法是不要同时扩展标题1和2。

是否有更好，更有效的方法来实现这一目标？

Answer 1

好的，我做了this fiddle希望是你想要的。

基本上你应该关注这个：

为标题及其子列提供相同的类
为要切换的标头设置 colspan 属性
为每个标头设置 data-fullcol 属性，以跟踪其最大 colspan
绑定到点击事件 仅限 colspan 属性
将 第一个类提供给您希望保持可见的列
在点击事件中隐藏所有列的类别与所点击的标题不同的列，并且还没有第一个类
将所有其他标题 colspan 设置为1
切换所有与您点击的标题相同的类
到切换标题的 colspan 将 colspan 设置为 （data-fullcol - colspan +1）

注意：这只有在标题包含单个类时才有效，如果您想为多个类提供，请考虑将“重要类”保存在特定属性中，例如 data-class

html高效伸缩桌柱

1 个答案: