如何实现表格行上下移动时自动更新序号列？

嘿，我完全懂你刚接触JavaScript时遇到这种基础问题的纠结——虽然网上类似问题不少，但要找到适配自己代码的方案确实得踩点坑！

你已经实现了表格行的上下移动功能，但卡在了序号列的自动更新上，之前用jQuery尝试的写法出问题，核心原因是你操作的是字符串而非DOM元素本身：比如$(tr.firstElementChild.innerHTML)这种写法，是把单元格的内容字符串传给jQuery，相当于让它去查找匹配这个字符串的元素，而不是直接操作这个序号单元格。

方案一：基于你找到的思路优化（交换两行序号） #

可以把序号交换的逻辑整合到你的moveChoiceTo函数里，注意要直接操作DOM元素（或用jQuery选中正确的元素）：

function moveChoiceTo(elem_choice, direction) {
  var tr = elem_choice.parentNode.parentNode;
  var tbody = tr.parentNode; // 修正原代码笔误，tr的父节点是tbody/table而非td
  var targetRow;

  if (direction === -1 && tr.previousElementSibling && !tr.previousElementSibling.id) {
    targetRow = tr.previousElementSibling;
    tbody.insertBefore(tr, targetRow);
    // 交换两行的序号
    const currentNum = tr.firstElementChild.textContent;
    const targetNum = targetRow.firstElementChild.textContent;
    // 原生JS写法
    tr.firstElementChild.textContent = targetNum;
    targetRow.firstElementChild.textContent = currentNum;
    // 或者用你找到的jQuery写法（注意选中DOM元素，不是innerHTML字符串）
    // $(tr.firstElementChild).html(targetNum);
    // $(targetRow.firstElementChild).html(currentNum);
  } else if (direction === 1 && tr.nextElementSibling) {
    targetRow = tr.nextElementSibling;
    tbody.insertBefore(tr, targetRow.nextElementSibling);
    // 交换两行的序号
    const currentNum = tr.firstElementChild.textContent;
    const targetNum = targetRow.firstElementChild.textContent;
    tr.firstElementChild.textContent = targetNum;
    targetRow.firstElementChild.textContent = currentNum;
  }
}

方案二：更通用的序号重置法（推荐） #

如果以后表格行数变多，或者有其他操作改变行顺序，只交换两行序号的逻辑可能会有疏漏。更稳妥的方式是：行移动完成后，重新遍历所有数据行，依次设置序号：

// 单独写一个更新序号的函数
function updateRowNumbers() {
  // 选中所有非表头的行（表头tr的id是first）
  const rows = document.querySelectorAll('tr:not(#first)');
  rows.forEach((row, index) => {
    // 序号从1开始，所以是index + 1
    row.firstElementChild.textContent = index + 1;
  });
}

// 修改你的移动函数，最后调用更新序号的方法
function moveChoiceTo(elem_choice, direction) {
  var tr = elem_choice.parentNode.parentNode;
  var tbody = tr.parentNode;

  if (direction === -1 && tr.previousElementSibling && !tr.previousElementSibling.id) {
    tbody.insertBefore(tr, tr.previousElementSibling);
  } else if (direction === 1 && tr.nextElementSibling) {
    tbody.insertBefore(tr, tr.nextElementSibling.nextElementSibling);
  }

  // 移动完成后统一更新所有序号
  updateRowNumbers();
}

这种方法不管怎么移动行，都能保证序号始终是连续的1、2、3...，后续维护起来也更简单。

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