本文介绍如何通过单个按钮控制表格中对应行的启用/禁用状态：点击按钮时，整行高亮变红且按钮文字切换为“disable”；再次点击则恢复原状，按钮变回“enable”，全程无需额外状态变量，仅依赖 css 类与 jquery 简洁逻辑实现。
本文介绍如何通过单个按钮控制表格中对应行的启用/禁用状态：点击按钮时，整行高亮变红且按钮文字切换为“disable”；再次点击则恢复原状，按钮变回“enable”，全程无需额外状态变量，仅依赖 css 类与 jquery 简洁逻辑实现。
要实现“同一按钮切换整行启用/禁用状态”，核心思路是：利用按钮当前文本值判断操作意图，并通过 CSS 类统一控制行样式与交互状态。无需维护独立的 JavaScript 状态数组，简洁可靠。
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 实现步骤
- HTML 结构优化：确保 <th> 标签语义正确（表头应仅用于列标题），实际数据行推荐使用 <td>；同时为按钮绑定事件更易定位。
- jQuery 事件委托：监听所有 td input[type="button"] 的点击事件，使用 .closest('tr') 精准获取所属行。
- 按钮文本动态切换：利用 jQuery 的 val() 回调函数，根据当前值返回相反状态（"enable" ↔ "disable"）。
- 行样式统一控制：通过 .toggleClass('selected') 切换预定义 CSS 类，避免手动修改 style 或重复 DOM 操作。
? 完整可运行代码
<!DOCTYPE html>
<html>
<head>
<style>
.selected {
background-color: #ffcccc; /* 柔和红色，提升可读性 */
color: #d32f2f;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 1rem;
}
td, th {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
}
input[type="button"] {
padding: 4px 10px;
cursor: pointer;
font-size: 0.9em;
border: none;
background-color: #4caf50;
color: white;
border-radius: 3px;
transition: background-color 0.2s;
}
input[type="button"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value3</td>
<td>Value4</td>
<td><input type="button" value="enable"></td>
</tr>
<tr>
<td>Value5</td>
<td>Value6</td>
<td><input type="button" value="enable"></td>
</tr>
<tr>
<td>Value7</td>
<td>Value8</td>
<td><input type="button" value="enable"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('td input[type="button"]').on('click', function() {
const $btn = $(this);
const $row = $btn.closest('tr');
// 切换按钮文字
$btn.val((_, val) => val === "enable" ? "disable" : "enable");
// 切换行高亮样式
$row.toggleClass('selected');
// 【可选】禁用/启用行内其他交互元素（如输入框）
// $row.find('input, select, textarea').prop('disabled', $btn.val() === 'disable');
});
});
</script>
</body>
</html>⚠️ 注意事项与扩展建议
- 语义化 HTML：原示例中误用 <th> 包裹数据单元格，已修正为 <td>；表头统一置于 <thead> 内，符合无障碍与 SEO 最佳实践。
- 样式兼容性：.selected 类仅影响背景色，若需禁用行内表单控件（如输入框、下拉框），可取消注释末尾的可选代码段，调用 .prop('disabled', true/false)。
- 性能考量：对于超大表格（>1000 行），建议改用事件委托（如 $('table').on('click', 'td input[type="button"]', ...)）以减少事件监听器数量。
- 无障碍增强：可为按钮添加 aria-pressed 属性同步状态（例如：$btn.attr('aria-pressed', $btn.val() === 'disable')），提升屏幕阅读器支持。
该方案轻量、可复用、易维护，适用于管理后台、配置列表等需要行级开关的典型场景。
