在我尝试重新发明轮子(通过 jQuery 插件或类似插件)之前,我想看看是否有更简单的方法或用户可能知道的现有插件。我想要做的是滚动包含多个表标题的表的主体。例如,想象一下这种结构:
<table>
<thead>
<tr>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
老实说,我还没有尝试过上面的语法来查看它是否有效。我拥有的实际标记当前不使用 thead/tbody,而是滚动整个父 div(如下所示)。
我想要实现的是滚动整个表格,以便在顶部查看最相关部分的标题。目前,如果行数足够,标题会滚出 View 。
我知道用于滚动带有一个标题的表格的各种技术,但是多个呢?有没有现有的方法来实现这一目标?我对不同的想法持开放态度,但现在我正在考虑简单地在顶部显示与内容最相关的表格标题。
最佳答案
几个月前,我编写了一些代码,这些代码完全符合我希望 header 执行类似于 iOS 上的节 header 的功能。
利用 Jquery,我最终得到的解决方案涉及创建一个 onScroll(以及用于调整窗口大小的 onResize)事件监听器,该监听器检查所有 $('table thead')
并检查它们的 $ (this).position()
在页面上。
检查是 thead
的位置是否高于当前视口(viewport)的顶部。
一旦找到最相关的标题(视口(viewport)上方最底部的 thead
),我就创建了一个新的 table
,position: fixed
在 (0, 0) 并将标题行的每一列复制到其中一个新列,并手动设置其 width
属性以匹配原始表。
I have put together a Proof of Concept which shows how this all works .
这是它如何工作的一些伪代码:
- 检查表格是否可见
- 获取表中所有
thead
部分的列表 - 反转列表
- 在数组中找到第一个
thead
,其顶部位置小于body
元素的scrollTop
- 如果我们找到一个:
- 创建广告的深拷贝
- 制作容器表
- 从原始表中复制属性,以便复制样式
- 将容器定位在
[0, originalTable.left]
- 设置宽度等于原始表格的
outerWidth
- 将找到的每个
td
的宽度设置为原始表中匹配的td
的宽度 - 将其添加到 DOM
- 如果没有找到,则从 DOM 中删除现有的容器
还有一些其他的边缘案例细节也使它变得更好:
- 固定行的原点不是 (0, 0),而是根据具有固定标题的下方的
tbody
的“真实”标题行是否应该插入它来更改离开。 - 确保在创建新标题行之前删除之前的标题行
- 如果您要制作的标题与现有标题相同,请不要重新创建标题行
这种方法比我尝试过的其他方法效果更好,例如尝试 position:absolute
一个对象,因为 Firefox 和 IE 在运行 onScroll 处理程序时并不是非常快,所以你倾向于参见“抖动”。我还尝试使用 thead
的 position
属性进行处理,这最终导致表格列宽跳跃并且与数据不匹配。
thead
节点并不是此解决方案所必需的,因为您可以使用其他一些选择器来确定哪些行是标题等。
更新:添加示例代码和伪代码 更新:Dropbox 更改了他们的系统,用 jsfiddle URL 替换了示例
关于javascript - 滚动具有多个固定表头的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8043621/