更新
Demo 2 和 Demo 3 添加。其中一个演示的行为与 OP 希望评论的一样。
在文档对象上委托点击事件。任何对文档（基本上是整个页面）的点击都会被检测到——这当然是不可取的。
`$(document).on("click',...`
委派什么对点击做出实际反应，什么没有，是称为事件委派的编程模式的目标。 jQuery 在任何事件方法签名中提供了一个可选的第二个参数，称为data 对象。这个参数基本上是一个选择器字符串，指定$(this)的范围：
`$(document).on("click', '#data td, #change', ...
因此，上面的示例将点击事件专门委托给#data 内的任何<td> OR #change。忽略委托元素以外的任何地方的点击（除非有另一个点击事件处理程序）。最后一个参数是当<td> 或#data 或#change 上的任何<td> 上的点击事件触发时将调用的回调函数。回调函数使用$(this) 和流控制来委托点击事件并确定行为（或结果）。在演示中，基本上是.toggleClass() 方法.addClass() 定位<tr>(s) 没有.highlighted 类，反之.removeClass() 定位已经有<tr>(s) 类的<tr>(s)。
演示中评论了更多细节。
直接点击任意<td>，其父<tr>类.highlighted被切换。
单击该按钮，所有<tr> 上的所有.highlighted 类都会切换。
演示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>