无法通过JavaScript从HTML表格获取ISBN内容，求解决方案

AI 小北

2026-8-1

解决表格中获取ISBN失败的问题

你的问题出在**previousSibling会获取到空白文本节点**——你通过innerHTML生成表格行时，代码里的换行和空格会被解析为文本节点，导致你拿到的不是包含ISBN的<td>元素。另外，直接依赖DOM节点的层级遍历很容易因为结构变化出错，更可靠的方式是先定位到当前行，再精准获取ISBN所在的单元格。

修改后的代码示例：

document.querySelector("#book-list").addEventListener("click", (e) => {
  // 确保点击的是删除按钮（包括i标签和a标签）
  if (e.target.closest('.delete')) {
    // 找到当前点击所在的表格行<tr>
    const row = e.target.closest('tr');
    // 获取第三列（ISBN所在的td，nth-child从1开始计数）
    const isbnTd = row.querySelector('td:nth-child(3)');
    // 拿到ISBN内容
    const isbn = isbnTd.textContent.trim();
    console.log(isbn);
  }
})

// 生成表格行的代码优化，减少空白节点干扰
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.title.trim()}</td>
<td>${book.author.trim()}</td>
<td>${book.ISBN.trim()}</td>
<td><a href="#" class="delete-btn delete"><i class="fa-solid fa-square-minus delete"></i></a></td>
`.trim();
// 别忘了把生成的行添加到表格中
document.getElementById("book-list").appendChild(row);