如何通过表格行切换选中控制HTML编辑按钮的启用与禁用？

我来帮你搞定这个按钮状态同步的问题！核心思路就是实时追踪选中行的数量变化，然后根据数量动态切换edit按钮的禁用状态。下面结合你现有的行选中逻辑，给你具体的实现方案：

1. 先准备核心状态更新函数 #

这个函数负责统计当前选中的行数，然后直接修改按钮的disabled属性：

// 获取你的edit按钮（记得替换成实际的ID）
const editBtn = document.getElementById('edit-btn');

function updateEditButtonStatus() {
  // 统计带有选中标记的行数量（假设你用`selected`类标记选中行）
  const selectedRowCount = document.querySelectorAll('table tr.selected').length;
  // 有选中行就启用按钮，否则禁用
  editBtn.disabled = selectedRowCount === 0;
}

2. 绑定到行选中切换逻辑里 #

在你现有的行点击切换选中的代码中，每次完成选中状态切换后，调用上面的更新函数：

// 获取所有表格行
const tableRows = document.querySelectorAll('table tr');

tableRows.forEach(row => {
  row.addEventListener('click', () => {
    // 你现有的切换选中状态的代码（比如切换selected类）
    row.classList.toggle('selected');
    // 调用更新按钮状态的函数
    updateEditButtonStatus();
  });
});

3. 页面初始化时同步状态 #

页面刚加载完成时，也要执行一次状态更新，避免按钮初始状态和实际选中情况不符：

document.addEventListener('DOMContentLoaded', updateEditButtonStatus);

额外注意事项 #

• 如果你的选中标记不是selected类（比如用自定义属性data-is-selected="true"），只需要修改统计选中行的选择器即可，比如：

  const selectedRowCount = document.querySelectorAll('table tr[data-is-selected="true"]').length;
  

• 如果有全选/反选这类批量操作按钮，也要在对应的点击事件里调用updateEditButtonStatus()，保证按钮状态同步。

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