单击时javascript切换表行背景颜色

javascript toggle table row background color on click

本文关键字：背景 颜色 javascript 单击      更新时间：2023-09-26

所以我有一些javascript代码，它在一个表行上单击exapnds所有后续的表行，直到它再次找到相同的表行类。

如果你把鼠标悬停在一行上，它就会变成灰色，这正是我所期望的。

唯一不起作用的是，当你点击表行时，我希望表行的背景颜色与悬停的颜色相同（灰色）。当您单击后退并折叠行时，颜色应该会消失。

我尝试添加一个切换类，如下所示。

$('.my-class').click(function(){
    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
});

但我不确定这是否是正确的做法。这是我的小提琴：http://jsfiddle.net/DhdRG/3/

只是一个提醒。这也起到了作用，这可能是一个更好的解决方案：

$('.my-class').click(function(){
    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("clicked");
});

http://jsfiddle.net/DhdRG/7/

您可以使用相同的事件切换类

演示http://jsfiddle.net/kevinPHPkevin/DhdRG/4/

$('.composite-test').toggleClass("grey");

您可以尝试$(this).removeClass('tr.my-class').addClass('tr.my-class.negative.clicked');而不是$(this).toggleClass('tr.my-class.negative.clicked')，但用单击的tr的id替换$(this)。

您可以切换另一个CSS类，使表行背景颜色与悬停（灰色）相同。http://jsfiddle.net/DhdRG/5/

$('.my-class').click(function(){
    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
    $(this).toggleClass("rowBg"); // added this line
});

CSS

.rowBg { background:gray;}
相关文章：