Tabulator.js实现行悬停时首列显示箭头图标

首先要注意你原代码里的事件绑定顺序问题：table变量是在$(function)之后声明的，直接在$(function)里调用table.on会找不到对象，得把事件绑定放到table实例化之后，或者把整个表格初始化逻辑包裹进$(function)里。

以下是完整的实现代码，利用Tabulator的rowMouseEnter和rowMouseLeave事件操作首列单元格：

$(function(){
    var table = new Tabulator("#table", {
        data: dataTable,
        layout:"fitColumns",
        addRowPos: "bottom",
        tabEndNewRow: true,
        columns:[
            {headerSort:false, frozen:true, width:30, minWidth:30},
            {title:"Name", field:"name"},
            {title:"Progress", field:"progress", sorter:"number"},
            {title:"Gender", field:"gender"},
            {title:"Rating", field:"rating"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob"}
        ]
    });

    // 鼠标进入行时显示右箭头
    table.on("rowMouseEnter", function(e, row){
        // 获取当前行的第一个单元格（索引从0开始）
        const firstCell = row.getCell(0);
        // 设置单元格内容为右箭头（用HTML实体实现，也可替换为图标库标签）
        firstCell.setValue("→");
        // 让箭头在单元格内居中显示
        firstCell.getElement().style.textAlign = "center";
    });

    // 鼠标离开行时清空箭头
    table.on("rowMouseLeave", function(e, row){
        const firstCell = row.getCell(0);
        firstCell.setValue("");
    });
});

关键细节说明： #

• row.getCell(0)：通过索引获取目标单元格，Tabulator的单元格索引从0开始计数
• setValue()：用于设置单元格内容，这里用HTML实体→生成右箭头，如果你使用Font Awesome等图标库，可替换为对应的图标标签（比如<i class="fa fa-arrow-right"></i>）
• 额外添加的textAlign样式是为了让箭头在固定宽度的首列中居中，优化视觉效果

内容的提问来源于stack exchange，提问作者Federico