JS调用table.insertRow()向空<tbody>插入行失效，行被错误插入非空<thead>

你遇到的问题根源于 HTMLTableElement.insertRow() 方法的默认行为规则：

• 你直接在元素上调用insertRow()
• 当
，没有显式指定要插入到中完全为空时，大部分浏览器会默认将新行插入到的第一个子段（也就是）的末尾
• 你预先给
table.insertRow()
最优解决方案 #

最稳妥的方案是显式选中

元素调用插入行方法

function myFunction() {
  var table = document.getElementById("myTable");
  // 先获取目标tbody元素
  var targetTbody = table.querySelector('tbody');
  // 直接在tbody上调用insertRow，默认插入到tbody末尾
  var row = targetTbody.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

如果不想修改DOM选中逻辑，也可以给table.insertRow()传入明确的插入位置索引：如果你的

内容的提问来源于stack exchange，提问作者Martin Kubovčík

写空占位的方案能生效，是因为此时存在已有行，的默认插入位置会自动指向的末尾，新行就不会跑到里了。，不需要提前添加占位空行，也不会受行数变化的影响，修改后的JS代码如下：固定只有1行，传入索引值1即可，新行就会插入到thead之后的tbody位置。但该方案兼容性不如前者，如果后续thead行数调整，插入位置就会出错，不推荐长期使用。