当前位置：首页 > JavaScript

js实现表格排序

2026-01-30 09:33:30JavaScript

实现表格排序的基本思路

通过JavaScript实现表格排序的核心逻辑是获取表格数据、根据列类型（数字/字符串）排序、重新渲染DOM。以下是具体实现方法：

获取表格数据并转换为数组

使用DOM操作获取表格行数据，存储为可排序的数组结构：

function getTableData(tableId) {
  const table = document.getElementById(tableId);
  const rows = Array.from(table.querySelectorAll('tr:not(:first-child)'));

  return rows.map(row => {
    const cells = Array.from(row.cells);
    return cells.map(cell => cell.textContent.trim());
  });
}

实现排序逻辑

根据列索引和排序方向执行排序，需区分数字和字符串类型：

js实现表格排序

function sortData(data, columnIndex, isAscending) {
  return data.sort((a, b) => {
    const valA = a[columnIndex];
    const valB = b[columnIndex];

    // 数字类型排序
    if (!isNaN(valA) && !isNaN(valB)) {
      return isAscending ? valA - valB : valB - valA;
    }

    // 字符串类型排序
    return isAscending 
      ? valA.localeCompare(valB)
      : valB.localeCompare(valA);
  });
}

重新渲染排序后的表格

将排序后的数据更新到DOM中：

function renderSortedTable(tableId, sortedData) {
  const table = document.getElementById(tableId);
  const tbody = table.querySelector('tbody');
  tbody.innerHTML = '';

  sortedData.forEach(rowData => {
    const row = document.createElement('tr');
    rowData.forEach(cellData => {
      const td = document.createElement('td');
      td.textContent = cellData;
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });
}

添加表头点击事件

为表头单元格添加点击事件处理程序：

js实现表格排序

function setupTableSorting(tableId) {
  const table = document.getElementById(tableId);
  const headers = table.querySelectorAll('th');
  let currentColumn = null;
  let isAscending = true;

  headers.forEach((header, index) => {
    header.style.cursor = 'pointer';
    header.addEventListener('click', () => {
      const data = getTableData(tableId);
      if (currentColumn === index) {
        isAscending = !isAscending;
      } else {
        currentColumn = index;
        isAscending = true;
      }
      const sortedData = sortData(data, index, isAscending);
      renderSortedTable(tableId, sortedData);
    });
  });
}

完整示例调用

HTML结构要求和初始化调用：

<table id="sortable-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>23</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>32</td>
      <td>87</td>
    </tr>
  </tbody>
</table>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setupTableSorting('sortable-table');
  });
</script>