DataTables 固定列时实现 hover

最新推荐文章于 2025-05-19 19:30:44 发布

weixin_34054931

最新推荐文章于 2025-05-19 19:30:44 发布

阅读量913

点赞数

文章标签： javascript ViewUI

本文介绍了DataTables表格中固定左侧栏的实现方法及其代码原理。通过复制并定位表格数据来达到固定效果，并提供了一段JavaScript代码实现鼠标悬停时行高亮显示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前说过 DataTables 表格固定栏使用方法。分析下它的代码，如下图

它实现固定左侧的原理就是把需要固定的数据复制一份，覆盖在全部数据的上面，用绝对定位固定在左边。

这样子有个问题就是，表格的伪类如果单纯用css是实现不了的。因为它实际上是2个部分。如果我们要实现这个效果，只能通过js代码来实现。

具体js代码如下：

$(document).on({
    mouseenter: function() {
        trIndex = $(this).index() + 1;
        $("table.dataTable").each(function(index) {
            $(this).find("tr:eq(" + trIndex + ")").addClass("hover")
        });
    },
    mouseleave: function() {
        trIndex = $(this).index() + 1;
        $("table.dataTable").each(function(index) {
            $(this).find("tr:eq(" + trIndex + ")").removeClass("hover")
        });
    }
}, ".dataTables_wrapper tr");