我想在单击按钮时更改表格行的颜色。但我的代码有问题。当我单击按钮时，表格行的颜色不会改变。
CSS:
tr.highlighted td {
background: red;
}
HTML:
<table id="data" border="1" cellspacing="1" width="500">
<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>
<button type="button" id="change">
Change
</button>
JQuery:
$('#data tr').click(function(e) {
$('#change').click(function() {
$('#data tr').removeClass('highlighted');
$(this).addClass('highlighted');
})
});
最佳答案
更新
添加了演示 2 和演示 3。其中一个演示的行为正如OP所希望的那样。
演示 2:
<tr>通过单击选择，然后通过单击按钮突出显示。演示 3:与演示 2 相同，只是一次只能突出显示一行。
在文档对象上委托(delegate)单击事件。任何对文档(基本上是整个页面)的点击都会被检测到——这当然是不可取的。
`$(document).on("click',...`
委派什么对点击实际使用react，什么不 react ，这是称为“事件委托(delegate)”的编程模式的目标。 jQuery 提供了一个可选的第二个参数，称为 data任何事件方法签名中的对象。该参数基本上是一个选择器字符串，指定 $(this) 的范围。 :
`$(document).on("click', '#data td, #change', ...
所以上面的例子将点击事件专门委托(delegate)给任何 <td> #data内或 #change 。除了委托(delegate)元素之外的任何地方的单击都将被忽略(除非该行还有另一个单击事件处理程序)。最后一个参数是回调函数，当任意 <td> 上的点击事件触发时将调用该函数。的#data或#change 。回调函数使用$(this)和流程控制来委托(delegate)单击事件并确定行为(或结果)。在演示中它基本上是 .toggleClass()方法.addClass()目标<tr>(s)没有 .highlighted类和反之.removeClass()目标<tr>(s)已经有 .highlighted类。
演示中评论了更多详细信息。
点击任意<td>直接及其父级 <tr>类.highlighted已切换。
点击按钮，所有.highlighted所有类(class)<tr>已切换。
演示 1
单击 <tr>或按钮突出显示 <tr>
/*
Delegate click event on document --
Consider clicks only on #data td or #change
*/
/*
if the clicked tag is a <td>...
get the .closest <tr> from that <td> and add .highlighted
class if it doesn't have it otherwise remove .highlighted
*/
/*
...otherwise get all <tr> and toggle the .highlighted class
*/
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$(this).closest('tr').toggleClass('highlighted');
} else {
$('#data tr').toggleClass('highlighted');
}
});tr.highlighted td {
background: red;
}<table id="data" border="1" cellspacing="1" width="500">
<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>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>演示 2
点击<tr>选择/取消选择，然后单击按钮突出显示所有选定的 <tr> .
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$(this).closest('tr').toggleClass('selected');
} else {
$('#data tr:not(.selected)').removeClass('highlighted');
$('#data tr.selected').addClass('highlighted');
}
});tr.highlighted td {
background: red;
}<table id="data" border="1" cellspacing="1" width="500">
<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>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>演示 3
最后<tr>单击被选中，然后单击按钮时突出显示
$(document).on('click', '#data td, #change', function(e) {
if ($(this).is('td')) {
$('#data tr').removeClass('selected');
$(this).closest('tr').addClass('selected');
} else {
$('#data tr').removeClass('highlighted');
$('.selected').addClass('highlighted');
}
});tr.highlighted td {
background: red;
}<table id="data" border="1" cellspacing="1" width="500">
<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>
<button type="button" id="change">
Change
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>关于javascript - 如果单击按钮，则更改颜色表行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55739122/