如何使用同一按钮动态启用/禁用表格行并切换样式-html教程-PHP中文网

如何使用同一按钮动态启用/禁用表格行并切换样式

本文介绍如何通过单个按钮控制表格中对应行的启用/禁用状态：点击按钮时，整行高亮变红且按钮文字切换为“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 结构优化：确保标签语义正确（表头应仅用于列标题），实际数据行推荐使用；同时为按钮绑定事件更易定位。
jQuery 事件委托：监听所有 td input[type="button"] 的点击事件，使用 .closest('tr') 精准获取所属行。
按钮文本动态切换：利用 jQuery 的 val() 回调函数，根据当前值返回相反状态（"enable" ↔ "disable"）。
行样式统一控制：通过 .toggleClass('selected') 切换预定义 CSS 类，避免手动修改 style 或重复 DOM 操作。

? 完整可运行代码



  <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>

Value1	Value2	操作
Value3	Value4
Value5	Value6
Value7	Value8

⚠️ 注意事项与扩展建议

语义化 HTML：原示例中误用包裹数据单元格，已修正为；表头统一置于内，符合无障碍与 SEO 最佳实践。
样式兼容性：.selected 类仅影响背景色，若需禁用行内表单控件（如输入框、下拉框），可取消注释末尾的可选代码段，调用 .prop('disabled', true/false)。
性能考量：对于超大表格（>1000 行），建议改用事件委托（如 $('table').on('click', 'td input[type="button"]', ...)）以减少事件监听器数量。
无障碍增强：可为按钮添加 aria-pressed 属性同步状态（例如：$btn.attr('aria-pressed', $btn.val() === 'disable')），提升屏幕阅读器支持。

该方案轻量、可复用、易维护，适用于管理后台、配置列表等需要行级开关的典型场景。