如何通过单个按钮动态启用/禁用表格行并切换样式-html教程-PHP中文网

如何通过单个按钮动态启用/禁用表格行并切换样式

本文介绍使用 jquery 实现表格中每行独立的启用/禁用功能：点击行内按钮即可切换该行状态（背景变红/恢复、按钮文字在“enable”与“disable”间切换），且无需额外状态变量，逻辑简洁可靠。

本文介绍使用 jquery 实现表格中每行独立的启用/禁用功能：点击行内按钮即可切换该行状态（背景变红/恢复、按钮文字在“enable”与“disable”间切换），且无需额外状态变量，逻辑简洁可靠。

在实际 Web 开发中，常需为表格提供行级交互控制能力——例如允许用户临时禁用某行数据参与后续操作，同时通过视觉反馈明确当前状态。本方案采用纯前端、轻量级实现，不依赖后端或复杂状态管理。

核心实现原理

利用 toggleClass() 切换 CSS 类控制样式，并结合按钮 value 属性的实时值判断状态，避免维护额外 JavaScript 状态变量，提升代码可读性与健壮性。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

完整示例代码



<style>
.selected {
    background-color: #ffdddd; /* 柔和红色背景，提升可读性 */
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 16px;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
}
input[type="button"] {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 3px;
}
input[type="button"]:hover {
    opacity: 0.9;
}
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Value1	Value2
Value3	Value4
Value5	Value6

关键说明与注意事项

✅ 语义正确性：HTML 中应仅用于表头单元格，示例中第二行起应统一使用（已修正）；
✅ 性能友好：事件委托非必需（因按钮静态存在），直接绑定高效且易理解；
⚠️ 无障碍提示建议：生产环境可为按钮添加 aria-pressed 属性增强可访问性，例如：
```
$btn.attr('aria-pressed', newVal === 'disable');
```
? 样式隔离：.selected 类仅影响背景色，不影响其他样式（如字体、边框），便于后续扩展；

? 可扩展方向：若需禁用行内所有表单控件，可在 toggleClass 后追加：

$btn.closest('tr').find('input, select, textarea').prop('disabled', newVal === 'disable');

该方案简洁、可复用、兼容主流浏览器，适用于管理后台、配置列表等需要快速行级开关的场景。