如何用JavaScript按指定顺序动态重排HTML表格列？

需求 #

现有如下HTML表格结构：

<table>
   <thead>
      <tr>
         <th class="subject">Subjects</th>
         <th>n1</th>
         <th>n2</th>
         <th>n3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th class="subject">subject1</th>
         <td>10</td>
         <td>0</td>
         <td>0</td>
      </tr>
      <tr>
         <th class="subject">subject2</th>
         <td>0</td>
         <td>5</td>
         <td>20</td>
      </tr>
   </tbody>
</table>

需要用JavaScript按照顺序['n2','n1','n3']重新排列表格列，最终得到如下结构：

<table>
   <thead>
      <tr>
         <th class="subject">Subjects</th>
         <th>n2</th>
         <th>n1</th>
         <th>n3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th class="subject">subject1</th>
         <td>0</td>
         <td>10</td>
         <td>0</td>
      </tr>
      <tr>
         <th class="subject">subject2</th>
         <td>5</td>
         <td>0</td>
         <td>20</td>
      </tr>
   </tbody>
</table>

实现代码 #

直接用原生JavaScript就能完成，代码如下：

// 定义目标列顺序
const columnOrder = ['n2', 'n1', 'n3'];
// 获取表格元素
const table = document.querySelector('table');
// 提取表头行和数据行
const headerRow = table.querySelector('thead tr');
const dataRows = table.querySelectorAll('tbody tr');

// 1. 整理列的原始索引
const headerCells = Array.from(headerRow.querySelectorAll('th'));
// 固定Subjects列在第一位，找到它的索引
const subjectColIndex = headerCells.findIndex(cell => cell.textContent.trim() === 'Subjects');
// 为目标列顺序中的每个列名找到原始索引
const targetColIndices = columnOrder.map(colName => 
  headerCells.findIndex(cell => cell.textContent.trim() === colName)
);
// 最终的列索引顺序：Subjects + 目标顺序列
const finalColIndices = [subjectColIndex, ...targetColIndices];

// 2. 重排列表头
finalColIndices.forEach(index => {
  headerRow.appendChild(headerCells[index]);
});

// 3. 重排每一行的单元格
dataRows.forEach(row => {
  const cells = Array.from(row.querySelectorAll('th, td'));
  finalColIndices.forEach(index => {
    row.appendChild(cells[index]);
  });
});

代码解释 #

• 先定位到表格、表头行和所有数据行；
• 找到Subjects列的索引，确保它始终在第一列；
• 遍历目标列顺序，匹配每个列对应的原始位置索引；
• 利用DOM元素的appendChild特性：将元素追加到父元素时，会自动从原位置移除，所以直接按顺序追加即可完成重排；
• 兼容数据行中Subjects对应的单元格是<th>标签的情况，统一用th, td选择所有单元格。

内容的提问来源于stack exchange，提问作者TAHER El Mehdi