如何用jQuery实现表格TD点击着色？解决仅第二个TD生效问题

问题描述 #

你希望点击表格内的TD元素时，给对应行添加背景着色效果，但目前只有第二个TD所在的行会被着色，不符合预期。你使用的代码如下：

jQuery代码

$(document).on('click', "#table_user tr:not(:first) td:first-child", function() { $("#edit").addClass('selected'); });

CSS代码

.selected { background-color: #ffd659; }

HTML表格代码

<table id="table_user" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th width="67%"> User </th>
<th>Action</th>
</tr>
</thead>
<tr id="edit">
<td>test test</td>
<td>
<a title="Edit" class="btn btn-icon-only btn-outline blue"><i class="glyphicon glyphicon-edit"> </i></a>
<a title="Delete" class="btn btn-icon-only btn-outline red" ><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
<!-- 其他表格行 -->
</table>

问题原因 #

核心问题出在你的jQuery逻辑上：你每次点击TD时，都是给固定ID为edit的那一行添加selected类。但HTML中ID是唯一标识，只能对应一个元素，所以不管你点击哪一行的TD，只有那个带id="edit"的行会被着色，其他行根本不会被选中。

解决方案 #

我们需要修改代码，让点击TD时自动定位到当前TD所在的行，再给该行添加着色类，而非绑定固定ID。

步骤1：移除行的固定ID

先把HTML中tr的id="edit"去掉（ID唯一，不能给每行都加同一个ID），如果需要标识可编辑行，可换成类（比如class="edit-row"），不过这里其实不需要，直接通过DOM关系找行即可。

步骤2：修改jQuery代码

修改点击事件逻辑，找到当前点击元素的父级tr，并添加selected类。如果需要单选效果（每次仅一行着色），还要先移除其他行的selected类：

$(document).on('click', "#table_user tr:not(:first) td:first-child", function() {
    // 移除所有已选中行的着色类（单选需求）
    $("#table_user tr.selected").removeClass('selected');
    // 找到当前点击TD所在的行，添加着色类
    $(this).closest('tr').addClass('selected');
});

• $(this)指代当前被点击的TD元素
• closest('tr')会向上查找最近的父级tr元素，精准定位到点击的那一行

步骤3：优化CSS（可选）

如果希望整行的所有TD都被着色，可以把CSS调整为：

tr.selected td {
    background-color: #ffd659;
}

这样比直接给tr加背景色更兼容，避免部分表格样式给TD单独设置背景导致着色不生效。

修改后的完整示例 #

<table id="table_user" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th width="67%"> User </th>
<th>Action</th>
</tr>
</thead>
<tr>
<td>test test</td>
<td>
<a title="Edit" class="btn btn-icon-only btn-outline blue"><i class="glyphicon glyphicon-edit"> </i></a>
<a title="Delete" class="btn btn-icon-only btn-outline red"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
<tr>
<td>another user</td>
<td>
<a title="Edit" class="btn btn-icon-only btn-outline blue"><i class="glyphicon glyphicon-edit"> </i></a>
<a title="Delete" class="btn btn-icon-only btn-outline red"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</table>

<style>
tr.selected td {
    background-color: #ffd659;
}
</style>

<script>
$(document).on('click', "#table_user tr:not(:first) td:first-child", function() {
    $("#table_user tr.selected").removeClass('selected');
    $(this).closest('tr').addClass('selected');
});
</script>

这样点击任意一行的第一个TD，对应的整行就会被着色，完全符合你的预期啦！

内容的提问来源于stack exchange，提问作者Yannick jansen