0

我正在尝试创建一个带有可伸缩列的动态 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。

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

4

1 回答 1

1

好的，我做了这个小提琴希望是你想要的。

基本上你应该关注这个：

  • 给标题和它的子列相同的类
  • 为要切换的那些标题设置colspan属性
  • 为每个标头设置一个data-fullcol属性以跟踪它们的最大colspan
  • 仅绑定到具有colspan属性的那些列的单击事件
  • 为您希望保持可见的那些列提供一流的服务
  • 在点击事件中隐藏其类不等于单击的标题的所有列并且还没有第一类
  • 将所有其他标题colspan设置为 1
  • 切换与您单击的标题具有相同类的所有列
  • 切换标题的colspan将colspan设置为(data- fullcol - colspan +1)

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

于 2012-09-30T10:32:11.617 回答