javascript - 如何使用 CSS 和 jQuery 根据表格单元格值有条件地在悬停时突出显示表格行？

Question

所以我有一个 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() 函数。控制台没有显示任何语法错误，但表格在悬停时没有突出显示功能。任何帮助将不胜感激。

Answer 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;
}