我想在单击按钮时更改表格行的颜色。但是我的代码有问题。当我单击按钮时，表格行的颜色不会改变。
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');
})
});
答案 0 :(得分：1)
演示2 和演示3 。其中一个演示的行为符合OP的希望。
演示2：通过单击选择<tr>，然后通过单击按钮将其突出显示。
演示3：与 Demo 2 相同，但一次只能突出显示一行。
删除文档对象上的click事件。任何对文档的单击（基本上是整个页面）都将被检测到-当然这是不可取的。
`$(document).on("click',...`
委派实际上对单击做出反应的内容和不对单击做出反应的内容是称为事件委托的编程模式的目标。 jQuery在任何事件方法签名中都提供了一个可选的第二个参数，称为data对象。此参数基本上是一个选择器字符串，用于指定$(this)的范围：
`$(document).on("click', '#data td, #change', ...
因此，上面的示例将点击事件专门委派给<td> OR #data中的任何#change。除委托元素之外的任何地方的点击都将被忽略（除非该行下还有另一个click事件处理程序）。最后一个参数是当<td>或#data中的任何#change上的click事件触发时将调用的回调函数。回调函数使用$(this)和流控件来委派click事件并确定行为（或结果）。在演示中，基本上是.toggleClass()方法，.addClass()定位到<tr>(s)，而没有.highlighted类，反之，.removeClass()定位到已经具有的<tr>(s) .highlighted类。
更多详细信息在演示中进行了评论。
直接单击任何<td>并切换其父<tr>类.highlighted。
单击按钮，将切换所有.highlighted上的所有<tr>类。
单击<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>
单击<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>
选中最后单击的<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>
答案 1 :(得分：0)
嵌套的click处理程序在这里没有意义。相反，您可以添加特定的类，将其命名为active到最后单击的row来跟踪它。之后，当您单击change按钮时，可以首先从每个highlighted中删除row类，然后将其添加到保存{{1} }类：
rowactive$('#data tr').click(function(e)
{
$('#data tr').removeClass('active');
$(this).addClass('active');
});
$('#change').click(function()
{
$('#data tr').removeClass('highlighted');
$("tr.active").addClass('highlighted');
});
答案 2 :(得分：0)
您可以这样做：
const $dataTr = $('#data tr');
const $change = $('#change');
let $toBeChanged = null;
$dataTr.click(function() {
$toBeChanged = $(this);
$change.prop('disabled', false);
});
$change.click(function() {
$dataTr.removeClass('highlighted');
$toBeChanged.addClass('highlighted');
})tr.highlighted td {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<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" disabled>
Change
</button>
答案 3 :(得分：0)
application-test.yml中的this是指按钮，而不是表行，因为在这种情况下，$(this).addClass('highlighted');将被设置为引发事件的任何值，以触发回调函数执行，其ID为this的元素。解决此问题的最简单方法之一是在执行change之前将this分配给另一个变量。
否则，如果要确保一次仅更改一个表行，则应将$('#change').click(function() {...})和('#data tr').click(function(e) {...})分开，以免它们嵌套，在两者之外都应有一个变量跟踪上一次单击的行，并在引发$('#change').click(function() {...})时读取该变量（而不是在注册回调时捕获单击了哪个表行）。
答案 4 :(得分：0)
您可以使用index和eq的jquery方法。删除嵌套的click。首先单击表row，使用index获取表中行的索引。值从0开始。将此值设置为变量。然后单击按钮，使用eq获取表行并向其中添加类
let getRowIndex;
let elem = $('#data tr');
elem.click(function(e) {
getRowIndex = $(this).index()
});
$('#change').click(function() {
if (getRowIndex !== undefined) {
elem.removeClass('highlighted');
elem.eq(getRowIndex).addClass('highlighted');
}
})tr.highlighted td {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
答案 5 :(得分：0)
$(document).ready(function(){
$('#data tr').click(function(e) {
if($(this).attr("class") == 'highlighted'){
$(this).removeClass('highlighted');
}else{
$(this).addClass('highlighted');
}
});
})tr.highlighted td {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<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>
答案 6 :(得分：0)
您将click事件附加到表tr上，然后在回调函数内将click事件附加到button。在按钮click中，您的$(this)将引用您的按钮，而不是单击tr。而是将类添加到单击的tr本身。
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).addClass('highlighted');
});.highlighted {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>