JavaScript高级程序设计 阅读笔记（十九） js表格排序

下面是针对"JavaScript高级程序设计 阅读笔记（十九） js表格排序"的完整攻略：

阅读笔记简介

这篇阅读笔记主要讲解了如何使用JavaScript进行表格排序。通过这篇笔记，我们可以学习到如何使用JavaScript实现表格排序的几种方式，包括基于DOM操作、使用jQuery库、第三方SortableJS库和自定义tableSorter库等。

方法一：基于DOM操作实现表格排序

基于DOM操作的实现方式比较原始，需要手动通过获取表格元素、绑定事件和修改表格内容来实现。具体步骤如下：

1. 获取需要排序的表格元素。

javascript
var table = document.getElementById("tableId");

1. 根据需要排序的列，给表格头添加点击事件，实现排序功能。

javascript
var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
th[i].onclick = function() {
sortTable(table, this.cellIndex);
}
}

1. 处理排序逻辑。

首先，需要获取需要排序的列，并找到需要排序的数据行，然后将这些数据行按照需要排序的规则进行排序，并将排序后的结果重新渲染到表格中。

javascript
function sortTable(table, column) {
var tbody = table.tBodies[0];
var rows = tbody.rows;
var rowsArr = [];
for (var i = 0; i < rows.length; i++) {
rowsArr.push(rows[i]);
}
rowsArr.sort(function(row1, row2) {
var cell1 = row1.cells[column].textContent;
var cell2 = row2.cells[column].textContent;
if (isNaN(cell1)) {
return cell1.localeCompare(cell2);
} else {
return cell1 - cell2;
}
});
for (var i = 0; i < rowsArr.length; i++) {
tbody.appendChild(rowsArr[i]);
}
}

1. 完整示例请参考这里。

方法二：使用jQuery库实现表格排序

相比于基于DOM操作的方式，使用jQuery库可以简化代码量，实现起来也更加方便。

1. 引入jQuery库。

```html

```

1. 给需要排序的表格添加jQuery插件。

javascript
$(document).ready(function() {
$("#tableId").tablesorter();
});

1. 实现排序功能。

只需要在需要排序的表头元素上添加sorter头，就可以实现对应的排序规则，具体可参考这里的示例。

1. 完整示例请参考这里。

以上就是使用JavaScript实现表格排序的两种常用方式，分别使用了基于DOM操作和jQuery库实现。当然，除了以上方式，还可以使用第三方SortableJS库和自定义tableSorter库来实现，具体可以根据不同场景进行选择。