我有一个表格,显示一列测试名称,其中包含与测试相关的各种测试数据的几列(无限数量)。由于会有多组数据,我想限制可以看到的数量,并让用户能够水平滚动显示/隐藏不同的数据集。
Jquery table column sliding effect的已接受答案具有我正在寻找的那种滑动效果,但是如何修复最左边的名称列?有很多数据,所以我不想克隆两个表,正如互联网上其他地方所建议的那样。
为名称创建一个固定表,为数据结果创建一个可滚动表,但行高在可接收的数据量上是可变的(单元格中可能有多行文本),因此对齐得到扔掉了。
另外,我不想要默认的Internet滚动条。我有左/右箭头图像,我将用它来控制滚动,就像我上面发布的例子。
我花了大约4个小时在StackOverflow和其他互联网上寻找答案,但我还没有找到合适的东西......任何帮助都会受到赞赏,谢谢!
编辑:绝对定位左列导致表的其余部分左移到左列下方(隐藏第一列数据)。添加与第一列具有相同内容的“镜像”列可以正常工作;问题是,当数据列的单元格高于相应的名称单元格时,绝对定位的名称单元格无法看到该事实并自行调整大小。想法?
答案 0 :(得分:6)
我设法修复第一列,让其他列下滑,并显示第二列:http://jsfiddle.net/Skooljester/trFPD/1/我现在尝试处理您问题的其他部分。
答案 1 :(得分:1)
根据我的要求,找出适用于表的内容。我之前所说的关于创建一个固定表和一个可滚动表的方法可以进行一些修改:
我保留了原始表格中的测试名称和数据,并将其放入滚动窗口。然后我创建了另一个只有左列的表,并将其绝对放在滚动表中左列的默认位置。然后我使用jQuery调整单个列单元格的大小以匹配数据单元格的变量高度(如果名称单元格更高,数据单元格仍然从重复列接收此数据)。
我还保留了一列列宽。当我单击向左或向右滚动按钮时,我将表格滚动到所需的数组值,并递增/递减数组索引。
不发布代码,因为我不想重写和格式化示例,但如果您对如何执行此操作有疑问,请随时提问。 =)