我需要你的帮助,
我如何使用jQuery
更改表格中所选行的背景颜色(对于此示例,我们使用css类“突出显示”
如果再次点击同一行,将其更改回默认颜色(白色)选择css类“nonhighlighted”
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlighted {
background: red;
}
.nonhighlighted {
background: white;
}
</style>
</head>
<body>
<table id="data" border="1" cellspacing="1" width="500" id="table1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:43)
.highlight { background-color: red; }
如果您想要多个选择
$("#data tr").click(function() {
$(this).toggleClass("highlight");
});
如果您希望一次只选择表格中的一行
$("#data tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#data tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
另请注意,您的TABLE标记有2个ID属性,您不能这样做。
答案 1 :(得分:11)
创建一个应用行颜色的css类,并使用jQuery打开/关闭类:
CSS:
.selected {
background-color: blue;
}
jQuery的:
$('#data tr').on('click', function() {
$(this).toggleClass('selected');
});
第一次单击将添加该类(使背景颜色为蓝色),下一次单击将删除该类,将其恢复为之前的状态。重复!
就您已经拥有的两个CSS类而言,我会更改.nonhighlighted
类以默认应用于表的所有行,然后打开和关闭.highlighted
:
<style type="text/css">
.highlighted {
background: red;
}
#data tr {
background: white;
}
</style>
$('#data tr').on('click', function() {
$(this).toggleClass('highlighted');
});
答案 2 :(得分:5)
这是一个可能的解决方案,它将为您的表格整个行着色。
CSS
tr.highlighted td {
background: red;
}
的jQuery
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).toggleClass('highlighted');
});
答案 3 :(得分:1)
在你的css中:
.selected{
background: #F00;
}
在jquery中:
$("#data tr").click(function(){
$(this).toggleClass('selected');
});
基本上,您创建一个类并从所选行中添加/删除它。
顺便说一句,你可以表现出更多的努力,你的代码xD中根本没有css或jquery / js
答案 4 :(得分:0)
jQuery:
$("#data td").toggle(function(){
$(this).css('background-color','blue')
},function(){
$(this).css('background-color','ur_default_color')
});
答案 5 :(得分:0)
删除表的第二个id声明:
<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
答案 6 :(得分:0)
我不是JQuery的专家,但我有相同的情况,我能够完成这样的事情:
$("#data tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
风格:
<style type="text/css">
.selected {
background: red;
}
</style>
答案 7 :(得分:0)
。突出 { 背景颜色:papayawhip; }
$("#table tr").click(function() {
$("#table tr").removeClass("highlight");
$(this).addClass("highlight");
});
答案 8 :(得分:-1)
要更改单元格的颜色,请执行以下操作:
$(document).on('click', '#table tbody td', function (event) {
var selected = $(this).hasClass("obstacle");
$("#table tbody td").removeClass("obstacle");
if (!selected)
$(this).addClass("obstacle");
});