原生JS获取点击表格行innerHTML与对应ID时始终返回相同值问题求解

核心错误原因 #

• HTML规范要求ID属性全局唯一，你在for循环中给每行的第一个<td>都设置了相同的id="ID"，document.getElementById()永远只会返回页面中第一个匹配该ID的元素，因此不管点击哪一行，拿到的都是第一条数据的ID。
• 调用点击函数时没有传入当前点击元素的引用，函数内的this默认指向window对象，无法定位到你点击的对应行。

修复方案 #

方案1：直接传递书籍ID作为参数（最简单） #

修改模板中<tr>的点击事件和JS函数即可：

<!-- 循环内的tr标签修改为如下，直接把book.id当参数传入函数 -->
<tr onClick='get_element_ID({{ book.id }})'>
  <td>{{book.id}}</td>
  <td>{{book.title}}</td>
  <td>{{book.author}}</td>
  <td>{{book.kategorie}}</td>
  <td>{{book.seitenzahl}}</td>
</tr>

<!-- 对应JS函数修改 -->
<script>
function get_element_ID(bookId){
  console.log(bookId);
  // 后续弹出信息的逻辑直接使用bookId即可
}
</script>

方案2：传递当前行元素引用（适合需要获取行内多个字段的场景） #

<!-- 循环内的tr标签修改为如下，传入当前点击的tr元素 -->
<tr onClick='get_element_ID(this)'>
  <td>{{book.id}}</td>
  <td>{{book.title}}</td>
  <td>{{book.author}}</td>
  <td>{{book.kategorie}}</td>
  <td>{{book.seitenzahl}}</td>
</tr>

<!-- 对应JS函数修改 -->
<script>
function get_element_ID(currentRow){
  // 取当前行第一个td的文本内容就是书籍ID
  const bookId = currentRow.querySelector('td:first-child').textContent.trim();
  console.log(bookId);
  // 要拿其他字段也可以用类似方式获取，比如拿书名：currentRow.querySelector('td:nth-child(2)').textContent
}
</script>

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