我创建了一个表格,其中的行是交替着颜色的(比如黄色和红色)。现在,我想要将点击的行的颜色更改为一种共同的颜色(比如蓝色),再次点击时恢复原来的颜色。
使用以下代码可以更改颜色:
$("#mainTable").find('#'+IDClicked).css("background-color", "#bbbbff");
我不知道如何恢复原样。
我创建了一个表格,其中的行是交替着颜色的(比如黄色和红色)。现在,我想要将点击的行的颜色更改为一种共同的颜色(比如蓝色),再次点击时恢复原来的颜色。
使用以下代码可以更改颜色:
$("#mainTable").find('#'+IDClicked).css("background-color", "#bbbbff");
。
<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>
$(document).ready(function(){
$("#rowClick > tr").click(function(){
$(this).toggleClass("active");
});
});
table tr.active {background: #ccc;}
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"); });
});
$('#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');
});
试试这个演示:
$('table tr').toggle(function(){
$(this).addClass('myclass');
}, function(){
$(this).removeClass('myclass');
});
css
.myclass{
background: red;
}
table tr{
background: yellow;
}
toggleClass()
,它只是做同样的事情! - Praveen Kumar Purushothaman
document.querySelectorAll
来实现...:)
- Praveen Kumar Purushothaman