DataTables 固定列時實現 hover

以前說過 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");

它實現的原理就是，鼠標放到那一行的時候，就給它添加一個hover樣式，挪開就移除這個樣式。

因此你本身還須要給它添加.hover的樣式，這裏這不細說了。相信你們都知道~~