如何在HTML表格的top-1位置插入行 解决新行出现在表头上方的问题

问题原因 #

你当前的实现存在两个核心问题：

1. var newRow = table.insertRow((table.rows.length / 0));是完全不规范的写法：除以0会得到Infinity，你现在能插到顶部完全是依赖浏览器的容错副作用，完全不具备可靠性，随时可能在不同浏览器环境下失效。
2. 直接对整个<table>对象调用insertRow方法，传入索引0时会把行插入到整个表格的最顶部，自然会落到表头区域的上方。

最优解决方案 #

规范的表格都会用<thead>存放表头、<tbody>存放数据行，你直接操作<tbody>插入行即可，完全不会影响表头区域：

function addRowtoTop() {
  // 读取输入值
  const fname = document.getElementById('fname').value;
  const lname = document.getElementById('lname').value;
  const city = document.getElementById('city').value;
  const country = document.getElementById('country').value;

  // 获取表格的tbody元素
  const table = document.getElementsByTagName('table')[0];
  const tbody = table.tBodies[0];

  // 在tbody的第0位插入新行，自然位于所有现有数据行顶部、表头下方
  const newRow = tbody.insertRow(0);

  // 插入单元格填充数据，可根据你的实际列数调整
  newRow.insertCell(0).textContent = fname;
  newRow.insertCell(1).textContent = lname;
  newRow.insertCell(2).textContent = city;
  newRow.insertCell(3).textContent = country;
}

备选方案（不推荐） #

如果你暂时不想调整表格结构，且确认表头固定只有1行，也可以直接给整个表格的insertRow传入索引1，新行就会插入到表头（索引0对应行）的下方：

// 仅适用于表头固定为1行的场景，表头行数变化后会失效
var newRow = table.insertRow(1);

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