如何将指定表格行前置到表格首行？当前代码仅能追加至末尾

嘿，作为前端新手碰到这种DOM操作问题很正常，我来帮你捋清楚～

你现在的代码rows[i].parentNode.insertBefore(rows[i], rows[i + rows[i]]);之所以会把行追加到末尾，是因为rows[i]是DOM元素，和数字索引i相加会得到NaN，rows[NaN]就是undefined。而insertBefore方法如果第二个参数传undefined，就会默认把元素插到父元素的最后，这就是为啥结果和你想要的相反啦。

要实现把指定行移到表格第一行之前，只需要用对insertBefore的参数就行，核心是找到表格的父容器（一般是<tbody>），然后把目标行插到父容器的第一个子元素前面。

具体实现代码 #

假设你已经确定了要移动的行的索引i，可以这样写：

// 获取目标行（rows是表格的行集合，比如table.rows）
const targetRow = rows[i];
// 获取目标行的父容器（通常是tbody，表格默认会生成tbody）
const parent = targetRow.parentNode;
// 把目标行插到父容器的第一个子元素之前，也就是最顶部
parent.insertBefore(targetRow, parent.firstElementChild);

一键触发的完整示例 #

如果要做一个按钮点击触发的效果，比如给表格加个“移到顶部”按钮，完整代码可以参考：

<button id="moveRowBtn">一键移到最前面</button>
<table id="myTable">
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>要移动的行</td></tr>
</table>

<script>
// 给按钮绑定点击事件
document.getElementById('moveRowBtn').addEventListener('click', () => {
  // 获取表格
  const table = document.getElementById('myTable');
  // 假设要移动索引为2的行（第三行，索引从0开始计数）
  const targetIndex = 2;
  const targetRow = table.rows[targetIndex];
  const tbody = table.tBodies[0];
  
  // 执行前置操作
  tbody.insertBefore(targetRow, tbody.firstElementChild);
});
</script>

这样点击按钮后，指定的行就会立刻移到表格的最前面啦～

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