如何在JavaScript中实现表格序号列自动连续调整 支持上下插入行

你无需修改现有的HTML结构，直接在index.js文件中写入如下代码即可实现需求：

// 向表格底部添加新行
function appendRow() {
  const table = document.getElementById('tbl');
  const newRow = createNewRow();
  table.appendChild(newRow);
  refreshSerialNumbers();
}

// 向表头下方顶部位置添加新行
function appendRowTop() {
  const table = document.getElementById('tbl');
  const headerRow = table.querySelector('tr:first-child');
  const newRow = createNewRow();
  headerRow.after(newRow);
  refreshSerialNumbers();
}

// 生成带预设数据的新行，可自行修改单元格内容
function createNewRow() {
  const row = document.createElement('tr');
  row.className = 'tr';
  row.innerHTML = `
    <td></td>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>Palo Alto</td>
    <td>U.S</td>
  `;
  return row;
}

// 重置所有行的序号，保证连续
function refreshSerialNumbers() {
  const allDataRows = document.querySelectorAll('tr.tr');
  allDataRows.forEach((row, index) => {
    row.querySelector('td:first-child').textContent = index + 1;
  });
}

逻辑说明 #

• 抽离了创建新行的通用逻辑，你可以直接修改createNewRow函数内的单元格内容，自定义插入的行数据
• 每次插入行完成后统一刷新所有行的序号，不管是顶部插入还是底部插入，都能保证序号连续，逻辑简单容错率高

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