javascript 在点击时切换表格行背景颜色答案

【问题标题】：javascript toggle table row background color on clickjavascript 在点击时切换表格行背景颜色
【发布时间】：2013-08-15 21:05:03
【问题描述】：

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

如果您将鼠标悬停在一行上，它会变为灰色，这是我所期望的。

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

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

$('.my-class').click(function(){

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

只是提个醒。这也有效，这可能是一个更好的解决方案：

$('.my-class').click(function(){

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

});

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

也许我的问题不清楚。我只希望相同的 tr 具有灰色的背景颜色，我有悬停

【解决方案3】：

您可以尝试使用$(this).removeClass('tr.my-class').addClass('tr.my-class.negative.clicked'); 代替$(this).toggleClass('tr.my-class.negative.clicked') 但将$(this) 替换为点击的tr 的ID。

【讨论】：

【解决方案4】：

您可以切换另一个 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;}

【讨论】：