JS实现表格字段排序

简介

表格中的数据排序是表格中常见的需求之一。本文将介绍JavaScript如何实现表格数据的排序。通过使用JavaScript反转数组顺序、排序算法和DOM操作，我们可以动态将表格中的数据按照指定条件进行排序。

策略

对表格字段进行排序，我们需要执行以下几个步骤：

1. 找到需要排序的表头元素。
2. 为该元素绑定排序事件，例如点击事件。
3. 在事件处理函数中，获取当前需要排序的列数据。
4. 对表格数据进行排序。
5. 将排序后的数据重新渲染到表格中。

实现

HTML

我们需要一个表格来演示数据排序的实现过程。下面是一个包含了5列数据和3行数据的基本表格结构。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>国籍</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>25</td>
      <td>中国</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>30</td>
      <td>美国</td>
      <td>教师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>40</td>
      <td>英国</td>
      <td>医生</td>
    </tr>
  </tbody>
</table>

JavaScript

下面是一个简单的JavaScript函数，可以实现对表格中某一列的数据进行排序。

function sortTable(table, col, reverse) {
  // 获取表格行数据
  const rows = Array.from(table.rows).slice(1);
  // 排序函数
  const sortFunc = (a, b) => {
    const aVal = a.cells[col].textContent.trim();
    const bVal = b.cells[col].textContent.trim();
    return aVal > bVal ? 1 : -1;
  };
  // 对表格行数据进行排序
  const sortedRows = rows.sort(reverse ? sortFunc : (a, b) => -sortFunc(a, b));
  // 在表格中重新渲染数据
  for (const row of sortedRows) {
    table.tBodies[0].appendChild(row);
  }
}

该函数参数包含：

• table：表格元素
• col：需要排序的列：像表头中的第一列是0，第二列是1
• reverse：是否倒序排序

我们以年龄列为例，来详细讲解如何使用该函数实现排序。

// 获取表头元素
const ageHeader = document.querySelector('thead th:nth-child(3)');
// 添加点击事件处理函数
ageHeader.addEventListener('click', () => {
  // 获取当前排序顺序
  const currentOrder = ageHeader.getAttribute('data-order');
  // 判断是否需要倒序排序
  const reverse = currentOrder === 'asc';
  // 更改排序顺序状态
  ageHeader.setAttribute('data-order', reverse ? 'desc' : 'asc');
  // 执行排序操作
  sortTable(table, 2, reverse);
});

在代码中，我们首先通过querySelector方法获取了年龄列的表头元素，然后为该元素绑定了点击事件处理函数，通过获取data-order属性值，判断当前排序顺序是升序还是降序。

示例

下面是表格数据排序的两个例子。

升序排序

当我们点击年龄表头时，表格数据将以升序进行排序。

点击两次年龄表头，数据将恢复到原始状态。

降序排序

当我们点击年龄表头时并且之前点击了2次排序，表格数据将以降序进行排序。

再次点击年龄表头，数据将恢复到原始状态。