HTML HTML 表格排序

在本文中，我们将介绍如何在HTML中实现表格的排序功能。

阅读更多：HTML 教程

表格排序原理

表格排序是指通过点击表格的标题行，将该列的数据按照升序或降序进行排列的功能。实现表格排序的原理可以简单描述如下：

给表格标题行中的每个单元格添加一个点击事件监听器。
点击表格的某个标题单元格时，触发点击事件，在事件处理函数中进行排序操作。
根据需要，对表格中的每一行数据按照点击的标题单元格对应的数据进行排序。
更新排序后的数据后，重新将数据渲染到表格中。

实现表格排序的HTML代码示例

下面是一个简单的HTML表格，我们将通过添加一些JavaScript代码来实现排序功能。

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">姓名</th>
      <th onclick="sortTable(1)">年龄</th>
      <th onclick="sortTable(2)">成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>90</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>21</td>
      <td>85</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

上面的代码定义了一个带有3列的表格，每个标题单元格都绑定了一个onclick事件，点击时将触发sortTable()函数。

接下来我们添加JavaScript代码来实现排序功能：

function sortTable(columnIndex) {
  var table = document.getElementById("myTable");
  var rows = Array.from(table.getElementsByTagName("tr"));
  var ascending = true;

  rows.shift(); // 移除表头行

  rows.sort(function(a, b) {
    var aCellValue = a.cells[columnIndex].textContent;
    var bCellValue = b.cells[columnIndex].textContent;

    if (columnIndex === 0 || columnIndex === 1) {
      // 字符串排序
      return ascending ? aCellValue.localeCompare(bCellValue) : bCellValue.localeCompare(aCellValue);
    } else {
      // 数字排序
      return ascending ? Number(aCellValue) - Number(bCellValue) : Number(bCellValue) - Number(aCellValue);
    }
  });

  ascending = !ascending; // 切换排序顺序

  // 将排序后的行重新插入表格
  rows.forEach(function(row) {
    table.appendChild(row);
  });
}

上面的代码中，sortTable()函数接收一个参数columnIndex，表示点击的标题单元格所在的列索引。函数首先获取到表格元素及所有的行，然后通过Array.from()方法将行转换为数组，方便后续操作。接着，我们移除了第一行表头行，并调用sort()方法对剩下的行进行排序。排序时，我们根据点击的标题单元格的索引以及单元格中的文本内容进行比较，对于姓名和年龄列使用localeCompare()方法进行字符串比较，对于成绩列使用Number()方法将文本内容转换为数字后进行比较。最后，我们使用forEach()方法将排序后的行重新插入表格。

通过上面的代码，我们就可以实现对表格数据的排序了。可以尝试点击表格标题行来验证排序功能。