3

交互の色（黄色と赤など）の行を持つテーブルを作成しました。ここで、クリックされた行の色を 1 つの一般的な色 (たとえば青) に変更したいと思います。もう一度クリックすると、元の色に戻ります。このコードを使用して色を変更できます

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

元に戻す方法がわかりません。

4

4 に答える 4

10

私たちはあなたのコードがこのようになっていると仮定します：

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

于 2012-10-19T08:54:10.603 に答える
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');
});​

フィドル

于 2012-10-19T09:04:08.643 に答える
3

以下のコードを試してください

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");  });
});
于 2012-10-19T08:57:12.320 に答える
2

このデモをお試しください：

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

css

.myclass{
background: red;
}

table tr{
 background: yellow;
}
于 2012-10-19T08:55:58.650 に答える