如何在悬停时根据 CSS 和 jQuery 的表格单元格值有条件地突出显示表格行？答案

【问题标题】：How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?如何在悬停时根据 CSS 和 jQuery 的表格单元格值有条件地突出显示表格行？
【发布时间】：2015-03-11 12:34:17
【问题描述】：

所以我有一个填充了负值和正值的 HTML 表。我想查询特定值，然后悬停在小于 0 的表值上我想用红色背景色突出显示该行，对于大于或等于 0 的值应该用蓝色突出显示背景。

我目前的尝试是：

$(document).ready(function(){
    var rows = $("#htmlTable").find('tbody').find('tr');
    $.each(rows, function(key, value){
        var rowData = $(rows[key]).find('td:eq(1)').html();
        if (rowData < 0) {
            $("tr").hover(function(){
                $(this).addClass('.table-style-1 tbody > tr:hover');
            }
        }
        else {
            $("tr").hover(function(){
                $(this).addClass('.table-style-2 tbody > tr:hover');
            });
        }
    });
});

CSS类如下：

.table-style-1 tbody > tr:hover {
    background-color: red;
}

.table-style-2 tbody > tr:hover {
    background-color: blue;
}

我上面的代码正确地从表中获取数据，这可以通过简单的console.log(rowData) 行看出，所以我假设我的问题在于我对addClass() 和hover() 函数的实现。控制台未显示任何语法错误，但表格在悬停时没有突出显示功能。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

因为你得到一个带有rowData = $(rows[key]).find('td:eq(1)').html();的字符串，所以你应该在进行比较时将值转换为整数，例如

if (parseInt(rowData, 10) < 0) { ...

另外，你究竟为什么要添加像.table-style-2 tbody > tr:hover 这样的类？您应该只将 a 类添加到行中，例如negative 或 positive（注意：你需要使用$(this) 而不是$('tr')）

if (parseInt(rowData, 10) < 0) {
    $(this).addClass('negative');
}
else {
    $(this).addClass('positive');
}

然后像这样定义你的 CSS

tr.negative:hover {
    background-color: red;
}

tr.positive:hover {
    background-color: blue;
}

【讨论】：

我添加了parseInt()，但表格行仍未突出显示。
啊，事实上我有 tr 而不是 this 作为调用对象。谢谢您的帮助。我会在几分钟后接受答案。

【解决方案2】：

这里是一个例子：http://jsfiddle.net/wgkf4o9j/

$(document).ready(function(){
    $('table').on('mouseover','tr',function(event){
        var $tr = $(event.currentTarget);
        $tr.parents('table').find('td').removeClass('blue red');
        var value = parseInt($tr.find('td:eq(1)').html());      
        $tr.find('td').addClass(value < 0?'red':'blue');
    })
});

【讨论】：