使用 jQuery 更改单击的表格行的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17703710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the color of a clicked table row using jQuery
提问by John Smith
I need your help,
我需要你的帮助，
How can I, using jQuery,
我怎样才能使用 jQuery，
Change the background color of the selected row in my table (for this example, let's use the the css class "highlighted"
更改表中选定行的背景颜色（对于此示例，让我们使用 css 类“突出显示”
and if the same row is clicked on again, change it back to its default color (white) select the css class "nonhighlighted"
如果再次单击同一行，将其更改回其默认颜色（白色）选择 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>
回答by Louis Ricci
.highlight { background-color: red; }
If you want multiple selections
如果你想多选
$("#data tr").click(function() {
$(this).toggleClass("highlight");
});
If you want only 1 row in the table to be selected at a time
如果您只想一次选择表格中的 1 行
$("#data tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#data tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
Also note your TABLE tag has 2 ID attributes, you can't do that.
另请注意，您的 TABLE 标签有 2 个 ID 属性，您不能这样做。
回答by Katstevens
Create a css class that applies the row color, and use jQuery to toggle the class on/off:
创建一个应用行颜色的 css 类，并使用 jQuery 打开/关闭该类：
CSS:
CSS：
.selected {
background-color: blue;
}
jQuery:
jQuery：
$('#data tr').on('click', function() {
$(this).toggleClass('selected');
});
The first click will add the class (making the background color blue), and the next click will remove the class, reverting it to whatever it was before. Repeat!
第一次单击将添加类（使背景颜色为蓝色），下一次单击将删除该类，将其恢复为之前的状态。重复！
In terms of the two CSS classes you already have, I would change the .nonhighlightedclass to apply to all rows of the table by default, then toggle the .highlightedon and off:
就您已经拥有的两个 CSS 类而言，我会将.nonhighlighted类更改为默认应用于表的所有行，然后.highlighted打开和关闭：
<style type="text/css">
.highlighted {
background: red;
}
#data tr {
background: white;
}
</style>
$('#data tr').on('click', function() {
$(this).toggleClass('highlighted');
});
回答by jrthib
Here's a possible solution that will color the entire row for your table.
这是一个可能的解决方案，可以为表格的整行着色。
CSS
CSS
tr.highlighted td {
background: red;
}
jQuery
jQuery
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).toggleClass('highlighted');
});
回答by aleation
in your css:
在你的 css 中：
.selected{
background: #F00;
}
in the jquery:
在jQuery中：
$("#data tr").click(function(){
$(this).toggleClass('selected');
});
Basically you create a class and adds/removes it from the selected row.
基本上，您创建一个类并从所选行中添加/删除它。
Btw you could have shown more effort, there's no css or jquery/js at all in your code xD
顺便说一句，您本可以付出更多努力，您的代码中根本没有 css 或 jquery/js xD
回答by VishalDevgire
jQuery :
jQuery ：
$("#data td").toggle(function(){
$(this).css('background-color','blue')
},function(){
$(this).css('background-color','ur_default_color')
});
回答by Gabriel Glauber
Remove the second id declaration of table:
删除表的第二个 id 声明：
<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
回答by Nick Kahn
I'm not an expert in JQuery but I have the same scenario and I able to accomplis like this:
我不是 JQuery 的专家，但我有同样的场景，我能够像这样完成：
$("#data tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
Style:
风格：
<style type="text/css">
.selected {
background: red;
}
</style>
回答by Kinjal Gohil
.highlight { background-color: papayawhip; }
.highlight { 背景色：木瓜；}
$("#table tr").click(function() {
$("#table tr").removeClass("highlight");
$(this).addClass("highlight");
});
回答by Marco Puenayan
To change color of a cell:
要更改单元格的颜色：
$(document).on('click', '#table tbody td', function (event) {
var selected = $(this).hasClass("obstacle");
$("#table tbody td").removeClass("obstacle");
if (!selected)
$(this).addClass("obstacle");
});
