jquery突出显示有扭曲的行

我不是很好的jQuery，但我试图找出一种方法来突出显示我的鼠标结束（如绿色）表中的行。该页面上只有一个表格。我发现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" 
    }); 
});

但我需要更进一步。如果我点击一行，我希望该行突出显示不同的颜色（红色），然后悬停，并保持突出显示红色，除非另一行被点击。所以悬停突出显示行，除非它被点击。点击一行后，悬停仍然有效，不在点击行上，点击行保持红色，除非另一行被点击。有没有办法做到这一点。

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

来源

2014-03-31 jvcoach23

提供的jsfiddle –

听起来像是你应该使用更多的CSS是什么，以及使用JS只是切换被点击州。 – Shomz

如果我是你，我会用类而不是直接造型：

$("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/

来源

2014-03-31 15:25:12

谢谢..问题..在你的小提琴例子中，点击事件，其附加悬停或div ..只是试图找出它用来了解更多的顺序。另外，如果您愿意，如果我需要在页面加载中设置其中一行来使用或设置为“已单击”类，那么有什么好方法可以解决这个问题。我是否需要为div命名，并且这样做呢..好奇好的方法是什么。谢谢 – jvcoach23

对于你的第一个问题，事件绑定到div（或tr在你的情况下）。 Jquery允许你用1个堆栈链接方法：'$（selector）.method1（）。method2（）...'。对于你的第二个问题，你可以选择堆栈的第一个tr，并用'.trigger'来模拟一个点击：'.click（代码已经在这里）.first（）。trigger（'click'）' –

我更了解你正在说...第一个（）。触发器（'点击'）我也明白。我一直在努力自己解决这个问题，但它变得相当丑陋，我必须有更好的方式来处理我正在做的事情。我的最终目标是什么，我有一张4行的桌子。当有人点击一行时，我还需要使用该行中隐藏输入的值更新隐藏输入，以便我可以存储选定的值。通过同样的措施，在页面加载时，我需要突出显示除第一行之外的行，并在其中拾取隐藏值。希望你仍然愿意帮助分享。谢谢 – jvcoach23

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

用这个背景DEMO

来源

2014-03-31 15:23:02

看到这个小提琴：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'); 
});

来源

2014-03-31 15:24:01

jquery突出显示有扭曲的行

回答

相关问题