具有固定顶行和左列的Excel样式HTML表的更好实现？ （jsFiddle示例）

Question

我有一个非常简单的问题：是否有更有效的方法来实现一个固定行和列的大表，而不是我创建的stripped down jsFiddle example，或有更好的方法写几行jQuery来支持它吗？

在有人跳过我发布与其他人类似的问题之前，让我解释一下自己。我意识到有多个插件可以实现与上面的例子类似的效果。但是，它们中没有一个（我能找到）提供了我需要的灵活性和功能。

以下是我的实施必须支持的一些注意事项：

• 必须能够隐藏和取消隐藏整行
• 必须支持动态高度的单元格
• 应该（理想情况下）使用浏览器的滚动条来导航表格
• 必须快以支持大型表格
• 该表必须能够使用knockoutjs
动态生成

我在实施中看到的主要问题是它在Chrome和IE中滞后。我在示例中提供的表格很难注意到，但左列和顶行花了一些时间来“赶上”表的其余部分。当表很大并且在后台运行其他javascript时，这个问题变得更加明显。

那么，考虑到我的警告，是否有更好的方法来实现这一点？

Answer 1

您可以通过更改此功能来提高性能：

var offset = $(this).next().offset();
        $(this).offset(offset);
        $(this).css('left', '0');
        $(this).height($(this).next().height());

对此：

        var $this = $(this)
        var offset = $this.next().offset();
        $this.offset(offset);
        $this.css('left', '0');
        $this.height($this.next().height());

使用变量比反复连续包装同一个对象要快。

Answer 2

此jQuery插件非常适合您的请求：http://www.jtable.org/Demo