代码之家 › 专栏 › 技术社区 › connexo

意外自动插入tbody元素:表不是row.parentElement[重复]

html-table html javascript

-1

connexo · 技术社区 · 5 年前

检查这个简单的表:

const table = document.getElementById("table");

table.addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    const affectedRow = e.target.closest('tr');
    table.removeChild(affectedRow);
  }
});

<table border="1" id="table">
  <tr>
    <td>row A</td>
    <td><button>delete row</button></td>
  </tr>
  <tr>
    <td>row B</td>
    <td><button>delete row</button></td>
  </tr>
  <tr>
    <td>row C</td>
    <td><button>delete row</button></td>
  </tr>
</table>

尝试使用删除行 table.removeChild(affectedRow) 给了我

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

tbody 要素 强制性的

表格主体 表格主体

不使用 HTMLTableElement.prototype.deleteRow(index) ,仅使用 HTMLElement.prototype 方法和属性?

3 回复 | 直到 5 年前

Nick 5 年前

您可以检查表下面是否有tbody元素,如果有,则从该元素下面删除行:

const table = document.getElementById("table");
const tbody = (table.firstElementChild.nodeName == 'TBODY' ? table.firstElementChild : table);

table.addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    const affectedRow = e.target.closest('tr');
    tbody.removeChild(affectedRow);
  }
});

<table border="1" id="table">
  <tr>
    <td>row A</td>
    <td><button>delete row</button></td>
  </tr>
  <tr>
    <td>row B</td>
    <td><button>delete row</button></td>
  </tr>
  <tr>
    <td>row C</td>
    <td><button>delete row</button></td>
  </tr>
</table>

Joy Biswas 5 年前

用这种方法 table.tBodies[0].removeChild

tbody、thead和tfoot由所有浏览器插入,即使是冠军IE也这样做,这是W3c规范。

HTML Table Body元素(tbody)封装了一组表行(tr元素),表示它们构成了表的主体(Table),类似于表的页眉和页脚。

JoshG 5 年前

许多浏览器添加了 <tbody> 元素添加到HTML表中,如果不存在。你可以在这篇文章中了解更多的原因: Why do browsers insert tbody element into table elements?

removeChild() 只删除子对象,不删除子对象。所以如果 <t车身> 然后存在 <tr> 你要删除的是 <t车身> ,而不是 <table> 元素。

document.querySelector("#table tbody").removeChild(affectedRow);

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前