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

How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?

本文关键字：悬停 显示 有条件 CSS 何使用 jQuery 单元格 表单      更新时间：2023-09-26

所以我有一个填充了负值和正值的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()函数的实现上。控制台未显示任何语法错误，但表在悬停时没有突出显示功能。任何帮助将不胜感激。

由于您得到的是一个带有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;
}

下面是一个例子：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');
    })
});
相关文章：