如何实现HTML表格行拖拽换位 自动更新序号并保留原有id

直接使用原生HTML5拖拽API即可完成需求，无需引入第三方库，核心逻辑为：给数据行开启拖拽权限、监听拖拽事件完成行位置交换、拖拽结束后自动重排第一列的序号，其余字段保持原有值不变。

完整可运行代码 #

样式部分 #

保留原有表格样式，补充少量拖拽状态的视觉反馈样式，方便用户感知拖拽位置：

table, th, td {
  border: 1px black solid;
  border-collapse: collapse;
  padding: 8px 12px;
}
/* 拖拽中的行半透明显示 */
tr.dragging {
  opacity: 0.6;
  background: #f0f0f0;
}
/* 拖拽悬停的目标行显示插入提示线 */
tr.drag-over {
  border-top: 2px solid #2563eb;
}

HTML结构 #

表头行不需要开启拖拽，仅给数据行添加draggable="true"属性：

<table id="sortableTable">
  <tr>
    <th>number</th>
    <th>name</th>
    <th>id</th>
  </tr>
  <tr draggable="true">
    <td>1</td>
    <td>red</td>
    <td>1</td>
  </tr>
  <tr draggable="true">
    <td>2</td>
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr draggable="true">
    <td>3</td>
    <td>yellow</td>
    <td>3</td>
  </tr>
</table>

核心交互逻辑 #

const table = document.getElementById('sortableTable');
let draggedRow = null; // 全局记录当前被拖拽的行

// 给所有数据行（跳过表头）绑定拖拽事件
Array.from(table.querySelectorAll('tr:not(:first-child)')).forEach(row => {
  // 开始拖拽时记录当前行，添加拖拽样式
  row.addEventListener('dragstart', (e) => {
    draggedRow = row;
    row.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
  });

  // 拖拽经过行时阻止默认行为，允许放置，添加位置提示
  row.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    // 清除其他行的提示样式
    Array.from(table.querySelectorAll('tr.drag-over')).forEach(r => r.classList.remove('drag-over'));
    if (row !== draggedRow) row.classList.add('drag-over');
  });

  // 鼠标离开行时清除提示样式
  row.addEventListener('dragleave', () => {
    row.classList.remove('drag-over');
  });

  // 释放鼠标完成行插入
  row.addEventListener('drop', (e) => {
    e.preventDefault();
    row.classList.remove('drag-over');
    if (draggedRow === row) return;

    // 判断插入到目标行的上方还是下方
    const targetRect = row.getBoundingClientRect();
    const mouseYOffset = e.clientY - targetRect.top;
    const insertBeforeTarget = mouseYOffset < targetRect.height / 2;
    
    if (insertBeforeTarget) {
      table.insertBefore(draggedRow, row);
    } else {
      table.insertBefore(draggedRow, row.nextSibling);
    }

    // 重排所有行的number序号
    refreshRowNumbers();
  });

  // 拖拽结束清除所有临时样式
  row.addEventListener('dragend', () => {
    Array.from(table.querySelectorAll('tr')).forEach(r => {
      r.classList.remove('dragging', 'drag-over');
    });
    draggedRow = null;
  });
});

// 序号更新函数：仅修改第一列的number值，name、id字段完全保留
function refreshRowNumbers() {
  const dataRows = table.querySelectorAll('tr:not(:first-child)');
  dataRows.forEach((row, index) => {
    row.cells[0].textContent = index + 1;
  });
}

效果验证 #

按照你给出的示例场景测试：将内容为blue的行拖拽到第一行位置时，blue行的number会自动更新为1、id值保持2不变；原第一行red的number更新为2、id值保持1不变，两行位置完成互换，完全符合需求。

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