Question

我不是一个非常好的jQuery，但是我试图找出一种方法来突出显示我的鼠标结束的表格中的行（比如绿色）。页面上只有一个表格。我发现jQuery会使这种情况发生

$("tr").filter(function () {
    return $('td', this).length && !$('table', this).length
}).css({
    background: "ffffff"
}).hover(function () {
    $(this).css({
        background: "#C1DAD7"
    });},function () {
    $(this).css({
        background: "#ffffff"
    });
});

但我需要更进一步。如果我点击一行，我希望该行突出显示不同的颜色（红色）然后悬停，并保持突出显示为红色，除非单击另一行。因此，除非已点击，否则悬停会突出显示该行。单击一行后，悬停仍然有效，而不是在单击的行上，单击的行保持红色，除非单击另一行。有没有办法做到这一点。

我知道上面的颜色不匹配红色或绿色

Answer 1

$('tr').click(function(){
  $(this).parent().find('tr').css({background:'none'});
  $(this).css({ background: '#FF0000'});
});

将此用作背景DEMO

Answer 2

看到这个小提琴：http://jsfiddle.net/jFIT/88r7p/

$("table tr").hover(
        function () { $(this).css({ background: "#C1DAD7" }); },
        function () { $(this).css({ background: "whitesmoke" }); }
).click(function() {
 $('table tr.selected').removeClass('selected');
  $(this).addClass('selected');
});

Answer 3

如果我是你，我会使用课程而不是直接造型：

<强> JS

$("tr").filter(function () {
    return $('td', this).length && !$('table', this).length
}).hover(function(){
    $(this).toggleClass('hover');
}).click(function(){
    $('.clicked').removeClass('clicked');
    $(this).toggleClass('clicked');
})

<强> CSS

.hover{
    background : #C1DAD7;
}

.clicked{
    background : #f00;
}

小提琴：http://jsfiddle.net/9wgGQ/

jquery突出显示行扭曲

3 个答案: