单击更改表格行的颜色答案

【问题标题】：Change colour of table row onclick单击更改表格行的颜色
【发布时间】：2012-10-19 08:51:43
【问题描述】：

我创建了一个表格，其中的行具有交替的颜色（比如黄色和红色）。现在，我想将单击行的颜色更改为一种常见颜色（例如蓝色）。再次单击时恢复为原始颜色。我可以使用此代码更改颜色

$("#mainTable").find('#'+IDClicked).css("background-color", "#bbbbff");

我不知道如何恢复。

【问题讨论】：

标签： javascript html jquery css onclick

【解决方案1】：

我们假设您的代码是这样的：

HTML

<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

在这种情况下，您可以这样使用 jQuery：

$(document).ready(function(){
    $("#rowClick > tr").click(function(){
        $(this).toggleClass("active");
    });
});

最后是 CSS 部分：

table tr.active {background: #ccc;}

小提琴：http://jsbin.com/icusec/2

【讨论】：

哇！！你真的很快给了我一个答案..但我不能足够快地接受它！ :) 完美解决.. 谢谢！
当然... :) 欢迎，还添加了小提琴！ :)
没有 jquery？
@Sith2021 有很多方法可以使用document.querySelectorAll...:)

【解决方案2】：

试试下面的代码

CSS

.high-light{background:blue !important;}

jQuery

$(document).ready(function(){

 $('table tr').click(function(){ $(this).addClass("high-light");  });
 //If you have TD's background set try the below commented code
  $('table tr td').click(function(){ $(this).parent().find('td').addClass("high-light");  });
});

【讨论】：

【解决方案3】：

准确回答您的问题：

$('#box').on('click', function() {
    var box$ = $(this),
        isBgColorChanged = box$.data('isBgColorChanged'),
        bgColor = !!isBgColorChanged ? '#444' : '#ccc';
    box$.css('background-color', bgColor)
        .data('isBgColorChanged', !isBgColorChanged);
});

Fiddle

更优雅的解决方案：

$('#box').on('click', function() {
    $(this).toggleClass('activated');
});

Fiddle

【讨论】：

【解决方案4】：

试试这个demo：

$('table tr').toggle(function(){
$(this).addClass('myclass');
}, function(){
$(this).removeClass('myclass');
});

css

.myclass{
background: red;
}

table tr{
 background: yellow;
}

【讨论】：

你可以使用toggleClass()，它的作用是一样的！
@PraveenKumar，我只想执行更快更好的解决方案？