捕捉mousve悬停在文本上并突出显示相关值

Question

如果查看附加图像，在第二个表格中，当光标移动到包含4的单元格时，第一个表格中的所有对应文本都会突出显示。我设法使用hover函数实现了这一点：

/////////////////////////////////////////////////////////////
function HightLightTable1() {

    // 0 
    $(".t1_h_x0").hover(
function () {
    $(this).css("background-color", "yellow");
    $(".t1_t_x0").css("background-color", "yellow");
}, function () {
    $(this).css("background-color", "white");
    $(".t1_t_x0").css("background-color", "white");
}
);

    // 1 
    $(".t1_h_x1").hover(
function () {
    $(this).css("background-color", "yellow");
    $(".t1_t_x1").css("background-color", "yellow");
}, function () {
    $(this).css("background-color", "white");
    $(".t1_t_x1").css("background-color", "white");
}
);
// and keep adding code here if there are more tables 
}

这将导致很多html代码，例如，第一个表：

现在我正在重新设计网站，并开始怀疑是否有更有效的方法来实现这一目标？

如果您想看一下，请链接到我的site

Answer 1

您可以通过为所有单元格悬停相同的类名来简化代码，然后使用单元格文本构建查询以按下这样的正确跨度：

$(".hovercell").hover(
    function () {
        $(this).css("background-color", "yellow");
        $(".t1_t_x"+$(this).text()).css("background-color", "yellow");
    }, function () {
        $(this).css("background-color", "white");
        $(".t1_t_x"+$(this).text()).css("background-color", "white");
    }
);

jsfiddle：http://jsfiddle.net/markai/o3arj251/