更改表格行的顏色onclick

Question

我已經創建了一個具有交替顏色（例如黃色和紅色）的行的表。 現在，我想將單擊行的顏色更改為一種常用顏色（比如藍色）。再次單擊時，還原為原始顏色。 我可以使用此代碼更改顏色

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

我無法弄清楚如何恢復。

Answer 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

Answer 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");  });
});

Answer 3

完全回答你的問題：

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

小提琴

更優雅的解決方案

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

小提琴

Answer 4

試試這個演示 ：

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

CSS

.myclass{
background: red;
}

table tr{
 background: yellow;
}