JavaScript如何动态控制表格行的选择状态？

在JavaScript中，你可以通过监听`<td>`元素（通常是表单单元格）的`click`事件来动态控制表格行的选择状态。通常我们会用到`event.stopPropagation()`方法来阻止事件冒泡到表格的上一层，比如表格头部的`<th>`。以下是一个基本的例子：

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

// 遍历每一行
tableRows.forEach(row => {
  // 绑定点击事件
  row.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的链接跳转或提交
    e.stopPropagation(); // 防止选择整个表格

    // 判断当前行的状态
    if (row.classList.contains('selected')) {
      // 如果已选中，则移除选择状态
      row.classList.remove('selected');
    } else {
      // 否则，选择该行
      row.classList.add('selected');
    }
  });
});

这里假设你有一个名为`selected`的CSS类用于表示被选中的状态。你需要先在CSS中定义它，比如：

.selected {
  background-color: lightgray; /* 或者自定义样式 */
}