如何为表格行添加EventListener并提取data-id属性

嘿，我一眼就看到问题啦！你用document.querySelectorAll(".tableRow")拿到的是一个NodeList（也就是一堆DOM元素的集合），不是单个元素，所以直接给整个集合调用addEventListener肯定行不通～下面给你两种解决办法：

方法1：遍历每个行元素单独绑定事件 #

这种方法适合表格行都是静态渲染的场景，我们遍历querySelectorAll返回的集合，给每一行单独添加点击监听：

const rowClicks = document.querySelectorAll(".tableRow");
// 遍历集合里的每一行
rowClicks.forEach(row => {
  row.addEventListener("click", function() {
    // 提取data-id属性，两种写法都可以
    const rowId = this.getAttribute("data-id");
    // 或者更简洁的：const rowId = this.dataset.id;
    console.log("点击的行ID是：", rowId);
  });
});

方法2：事件委托（更推荐） #

如果你的表格行是动态生成的（比如通过JS渲染、后端异步加载），上面的方法可能会漏掉新添加的行。这时候用事件委托更高效——我们把监听绑定到表格的父元素上，利用事件冒泡来捕获点击：
首先确保你的表格有一个父容器（比如<table>标签）：

<table id="userTable">
  <tr class="tableRow" data-id="{{this.id}}">
    <td>{{this.first_name}}</td>
    <td>{{this.last_name}}</td>
    <td>{{this.email}}</td>
  </tr>
  <!-- 更多行... -->
</table>

然后绑定事件到父元素：

const userTable = document.getElementById("userTable");
userTable.addEventListener("click", function(e) {
  // 找到点击事件源头最近的.tableRow元素
  const clickedRow = e.target.closest(".tableRow");
  if (clickedRow) {
    // 获取行ID
    const rowId = clickedRow.dataset.id;
    console.log("点击的行ID是：", rowId);
  }
});

这种方法的好处是：只需要绑定一次事件，不管后来新增多少行，都能触发点击逻辑，性能也更好～

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