js表格排序实例分析（支持int,float,date,string四种数据类型）

以下是“js表格排序实例分析”的完整攻略：

简介

在网页开发中，表格是非常常见的元素，而在这些表格中为了用户的方便，我们可能需要给表格加上排序功能。这篇文章将介绍如何使用JS实现一个表格排序的功能。针对表格中不同的数据类型（int，float，date和string），我们将分别实现排序功能。

准备工作

在实现排序功能之前，我们需要做一些准备工作。

1. 添加表格

为了演示方便，我们在HTML中事先添加好一个表格。如下所示：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Money</th>
      <th>Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Lucy</td>
      <td>18</td>
      <td>9999.99</td>
      <td>2000-01-01</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Alice</td>
      <td>21</td>
      <td>100.5</td>
      <td>1998-03-25</td>
    </tr>
  </tbody>
</table>

1. 添加JS代码

我们需要编写JS代码来实现排序功能。我们把代码写在一个独立的JS文件中，然后在HTML中引入。

实现排序功能

int类型排序

我们首先来看一下如何对int类型的数据进行排序。具体实现思路如下：

1. 获取需要排序的列的索引。
2. 对表格进行排序，以数字大小为优先级进行排序。

具体代码如下：

function sortTableInt(tableId, columnIndex) {
  var table = document.getElementById(tableId);
  var tbody = table.tBodies[0];
  var rows = tbody.rows;
  var arr = [];
  for (var i = 0; i < rows.length; i++) {
    arr.push(rows[i]);
  }
  arr.sort(function(row1, row2) {
    var cellValue1 = parseInt(row1.cells[columnIndex].textContent);
    var cellValue2 = parseInt(row2.cells[columnIndex].textContent);
    return cellValue1 - cellValue2;
  });
  for (var i = 0; i < arr.length; i++) {
    tbody.appendChild(arr[i]);
  }
}

代码解析：

1. 我们先通过表格的ID来获取到表格对象和表格中的tbody元素。
2. 通过tbody元素获取到所有的行，将其存入数组arr中，并对arr进行排序。
3. 对arr进行排序，通过指定columnIndex，取出这一列的值，并将其转换为整型进行比较。
4. 最后将排序好的行重新添加到表格中。

float类型排序

对于float类型的数据进行排序，思路和int类型基本一致，只不过将parseInt()函数改成parseFloat()函数，将整型转换成浮点型即可。

function sortTableFloat(tableId, columnIndex) {
  var table = document.getElementById(tableId);
  var tbody = table.tBodies[0];
  var rows = tbody.rows;
  var arr = [];
  for (var i = 0; i < rows.length; i++) {
    arr.push(rows[i]);
  }
  arr.sort(function(row1, row2) {
    var cellValue1 = parseFloat(row1.cells[columnIndex].textContent);
    var cellValue2 = parseFloat(row2.cells[columnIndex].textContent);
    return cellValue1 - cellValue2;
  });
  for (var i = 0; i < arr.length; i++) {
    tbody.appendChild(arr[i]);
  }
}

date类型排序

对于date类型的数据进行排序，我们先将字符串转成Date对象，再将其转成时间戳进行比较。

function sortTableDate(tableId, columnIndex) {
  var table = document.getElementById(tableId);
  var tbody = table.tBodies[0];
  var rows = tbody.rows;
  var arr = [];
  for (var i = 0; i < rows.length; i++) {
    arr.push(rows[i]);
  }
  arr.sort(function(row1, row2) {
    var date1 = new Date(row1.cells[columnIndex].textContent);
    var date2 = new Date(row2.cells[columnIndex].textContent);
    return date1.getTime() - date2.getTime();
  });
  for (var i = 0; i < arr.length; i++) {
    tbody.appendChild(arr[i]);
  }
}

string类型排序

对于string类型的数据进行排序，我们可以直接调用String原型上的localeCompare()函数进行排序。

function sortTableString(tableId, columnIndex) {
  var table = document.getElementById(tableId);
  var tbody = table.tBodies[0];
  var rows = tbody.rows;
  var arr = [];
  for (var i = 0; i < rows.length; i++) {
    arr.push(rows[i]);
  }
  arr.sort(function(row1, row2) {
    return row1.cells[columnIndex].textContent.localeCompare(row2.cells[columnIndex].textContent);
  });
  for (var i = 0; i < arr.length; i++) {
    tbody.appendChild(arr[i]);
  }
}

演示示例

接下来，我们使用准备工作里的表格进行排序演示。

<button onclick="sortTableInt('myTable', 0)">按ID排序（int）</button>
<button onclick="sortTableString('myTable', 1)">按姓名排序（string）</button>
<button onclick="sortTableInt('myTable', 2)">按年龄排序（int）</button>
<button onclick="sortTableFloat('myTable', 3)">按金额排序（float）</button>
<button onclick="sortTableDate('myTable', 4)">按生日排序（date）</button>

通过点击不同的按钮，就可以实现不同类型数据的排序。