当前位置：首页 > JavaScript

js实现表格排序

2026-03-01 00:38:23JavaScript

实现表格排序的基本步骤

使用JavaScript实现表格排序通常涉及监听表头点击事件、获取数据、排序数据并重新渲染表格。以下是具体方法：

监听表头点击事件

为表格的表头（<th>）元素添加点击事件监听器，触发排序功能：

document.querySelectorAll('th').forEach(th => {
  th.addEventListener('click', () => {
    const table = th.closest('table');
    const columnIndex = Array.from(th.parentNode.children).indexOf(th);
    sortTable(table, columnIndex);
  });
});

数据排序逻辑

编写排序函数，根据列数据类型（数字、字符串、日期等）选择合适的排序方式：

js实现表格排序

function sortTable(table, columnIndex) {
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  const isAscending = !table.classList.contains('asc');

  rows.sort((a, b) => {
    const aValue = a.cells[columnIndex].textContent;
    const bValue = b.cells[columnIndex].textContent;

    // 数字排序
    if (!isNaN(aValue) && !isNaN(bValue)) {
      return isAscending ? aValue - bValue : bValue - aValue;
    }

    // 字符串排序
    return isAscending 
      ? aValue.localeCompare(bValue) 
      : bValue.localeCompare(aValue);
  });

  // 更新排序状态
  table.classList.toggle('asc', isAscending);
  table.classList.toggle('desc', !isAscending);

  // 重新渲染表格
  rows.forEach(row => tbody.appendChild(row));
}

处理复杂数据类型

对于日期或其他特殊格式的数据，需在排序前进行数据转换：

// 日期排序示例
const dateA = new Date(a.cells[columnIndex].textContent);
const dateB = new Date(b.cells[columnIndex].textContent);
return isAscending ? dateA - dateB : dateB - dateA;

添加视觉反馈

通过CSS类显示当前排序状态（升序/降序）：

js实现表格排序

th.asc::after { content: ' ↑'; }
th.desc::after { content: ' ↓'; }

完整示例代码

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>入职日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>2020-05-15</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>2018-11-03</td>
    </tr>
  </tbody>
</table>

<script>
  // 包含上述JavaScript代码
</script>