当前位置：首页 > JavaScript

js实现表格排序

2026-04-04 01:09:46JavaScript

实现表格排序的方法

获取表格数据

使用 document.querySelector 或 document.getElementById 获取表格元素。通过遍历表格的行和列，将数据提取到一个数组中。

const table = document.getElementById('myTable');
const rows = Array.from(table.querySelectorAll('tr'));
const headers = rows[0].querySelectorAll('th');
const data = rows.slice(1).map(row => {
  const cells = row.querySelectorAll('td');
  return Array.from(cells).map(cell => cell.textContent);
});

排序函数

根据列索引和排序方向（升序或降序）对数据进行排序。可以使用 Array.prototype.sort 方法。

function sortTable(columnIndex, ascending = true) {
  data.sort((a, b) => {
    const valA = a[columnIndex];
    const valB = b[columnIndex];
    if (valA < valB) return ascending ? -1 : 1;
    if (valA > valB) return ascending ? 1 : -1;
    return 0;
  });
}

更新表格

排序完成后，重新渲染表格内容。清空表格的现有行，然后根据排序后的数据重新填充。

function updateTable() {
  const tbody = table.querySelector('tbody');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    row.forEach(cell => {
      const td = document.createElement('td');
      td.textContent = cell;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
}

添加排序事件

为表头添加点击事件，点击时触发排序并更新表格。可以通过 data-order 属性记录当前排序方向。

headers.forEach((header, index) => {
  header.addEventListener('click', () => {
    const currentOrder = header.getAttribute('data-order');
    const ascending = currentOrder === 'asc' ? false : true;
    sortTable(index, ascending);
    updateTable();
    header.setAttribute('data-order', ascending ? 'asc' : 'desc');
  });
});

完整示例

将上述代码整合为一个完整的实现示例。确保表格具有 id="myTable" 并包含 <thead> 和 <tbody> 结构。

<table id="myTable">
  <thead>
    <tr>
      <th data-order="asc">Name</th>
      <th data-order="asc">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

处理数字和日期

对于数字或日期列，排序前需要将字符串转换为相应的类型。修改 sortTable 函数以支持不同类型的数据。

function sortTable(columnIndex, ascending = true) {
  data.sort((a, b) => {
    const valA = isNaN(a[columnIndex]) ? a[columnIndex] : Number(a[columnIndex]);
    const valB = isNaN(b[columnIndex]) ? b[columnIndex] : Number(b[columnIndex]);
    if (valA < valB) return ascending ? -1 : 1;
    if (valA > valB) return ascending ? 1 : -1;
    return 0;
  });
}