Question

在我尝试重新发明轮子之前（通过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（见下文）。

example table with multiple headers

我想要实现的是滚动整个表格，以便在最顶层查看最相关部分的标题。目前，标题滚出视图是否有足够的行。

我知道用于滚动带有一个标题的表的各种技术，但多重呢？有没有现成的方法来实现这一目标？我对不同的想法持开放态度，但现在我只想在内容中显示最相关的表格标题。

Answer 1

几个月前，我编写了一些代码，这些代码完全符合我希望标题执行类似于iOS上的节标题的代码。利用Jquery，我最终得到的解决方案包括创建一个onScroll（以及用于窗口大小调整的onResize）事件监听器，该监听器对所有$('table thead')进行检查并检查页面上的$(this).position()。

检查thead的位置是否高于当前视口的顶部。

找到最相关的标题（视口上方最下面的thead）后，我创建了一个新的table，其中position: fixed位于（0,0）并被复制为每个标题行列添加一个新列，并手动设置其width属性以匹配原始表。

I have put together a Proof of Concept which shows how this all works。

以下是一些伪代码：

检查表格是否可见
获取表格中所有thead部分的列表
反向列表
查找数组中的第一个thead，其顶部位置小于scrollTop元素的body
如果我们找到一个：
1. 创建thead的深层副本
2. 制作一个容器表
3. 复制原始表中的属性，以便复制样式
4. 将容器放在[0, originalTable.left]
5. 将宽度设置为等于原始表格的outerWidth
6. 将找到的每个td的宽度设置为原始表格中匹配的td的宽度
7. 将其添加到DOM
如果找不到，请从DOM中删除现有容器（如果有）

还有一些其他边缘案例细节也使这更好：

而不是（0,0），固定行的原点是根据具有固定标题的tbody下面的“真实”标题行是否应该将其推开而改变的。 / LI>
确保在创建新标题行之前删除以前的标题行
如果您要制作的标题与已存在的标题相同，则不要重新创建标题行

由于Firefox和IE在运行onScroll处理程序时不会非常快，因此您倾向于看到“抖动”，因此这种方法在尝试position:absolute对象时尝试了很多其他方法。我还尝试使用position的{{1}}属性进行混淆，这只是在表格列宽度跳跃而不匹配数据时结束。

thead个节点，因为您可以使用其他一些选择器来确定哪些行是标题等。

更新：添加了示例代码和伪代码

滚动具有多个固定表头的表

1 个答案: