使用 JavaScript 进行HTML表格排序

当 HTML 表有很多数据时，使信息列可排序会很有用。

以下技术使用 JavaScript 通过单击列标题对表行进行排序。

这是一个所有列都可排序的示例表。第二次单击同一列标题文本会反转排序。

Author	Title	Rating	Review Date
John Irving	The cider house rules	6	January 31, 11
Kate Atkinson	When will there be good news?	7	Nov. 31, 2001
Kathy Hogan Trocheck	Every Crooked Nanny	2	10.21.21
Orson Scott Card	The Memory Of Earth	2	10/14/11
Sarah-Kate Lynch	Blessed Are The Cheesemakers	9	1-12-2011
Stieg Larsson	The Girl With The Dragon Tattoo	2	August 3, 2022

JavaScript 有一个地方可以自定义，table 标签的 id 值。每个可排序列的表头文本都链接到 JavaScript。

如果你想重现这个例子，这里是表格代码。（本文后面将讨论的某些部分用红色表示。）

<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
-->
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;"><thead><tr><th><a href="javascript:SortTable(0,'T');">Author</a></th><th><a href="javascript:SortTable(1,'T');">Title</a></th><th><a href="javascript:SortTable(2,'N');">Rating</a></th><th><a href="javascript:SortTable(3,'D','mdy');">Review Date</a></th></tr></thead><tbody><tr><td>Orson Scott Card</td><td>The Memory Of Earth</td><td align="center">2</td><td>10/14/11</td></tr><tr><td>Sarah-Kate Lynch</td><td>Blessed Are The Cheesemakers</td><td align="center">9</td><td>1-12-2011</td></tr><tr><td>John Irving</td><td>The cider house rules</td><td align="center">6</td><td>January 31, 11</td></tr><tr><td>Kate Atkinson</td><td>When will there be good news?</td><td align="center">7</td><td>Nov. 31, 2001</td></tr><tr><td>Kathy Hogan Trocheck</td><td>Every Crooked Nanny</td><td align="center">2</td><td>10.21.21</td></tr><tr><td>Stieg Larsson</td><td>The Girl With The Dragon Tattoo</td><td align="center">2</td><td>August 3, 2022</td></tr></tbody></table><script type="text/javascript">/*Willmaster Table SortVersion 1.1August 17, 2016Updated GetDateSortingKey() to correctly sort two-digit months and days numbers with leading 0.Version 1.0, July 3, 2011Will Bontragerhttps://www.willmaster.com/Copyright 2011,2016 Will Bontrager Software, LLCThis software is provided "AS IS," withoutany warranty of any kind, without even anyimplied warranty such as merchantabilityor fitness for a particular purpose.Will Bontrager Software, LLC grantsyou a royalty free license to use ormodify this software provided thisnotice appears on all copies.*///// One placed to customize - The id value of the table tag.var TableIDvalue = "indextable";////var TableLastSortedColumn = -1;function SortTable() {var sortColumn = parseInt(arguments[0]);var type = arguments.length > 1 ? arguments[1] : 'T';var dateformat = arguments.length > 2 ? arguments[2] : '';var table = document.getElementById(TableIDvalue);var tbody = table.getElementsByTagName("tbody")[0];var rows = tbody.getElementsByTagName("tr");var arrayOfRows = new Array();type = type.toUpperCase();dateformat = dateformat.toLowerCase();for (var i = 0, len = rows.length; i < len; i++) {arrayOfRows[i] = new Object;arrayOfRows[i].oldIndex = i;var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g, "");if (type == 'D') {arrayOfRows[i].value = GetDateSortingKey(dateformat, celltext);} else {var re = type == "N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;arrayOfRows[i].value = celltext.replace(re, "").substr(0, 25).toLowerCase();}}if (sortColumn == TableLastSortedColumn) {arrayOfRows.reverse();} else {TableLastSortedColumn = sortColumn;switch (type) {case "N" :arrayOfRows.sort(CompareRowOfNumbers);break;case "D" :arrayOfRows.sort(CompareRowOfNumbers);break;default  :arrayOfRows.sort(CompareRowOfText);}}var newTableBody = document.createElement("tbody");for (var i = 0, len = arrayOfRows.length; i < len; i++) {newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));}table.replaceChild(newTableBody, tbody);} // function SortTable()function CompareRowOfText(a, b) {var aval = a.value;var bval = b.value;return(aval == bval ? 0 : (aval > bval ? 1 : -1));} // function CompareRowOfText()function CompareRowOfNumbers(a, b) {var aval = /\d/.test(a.value) ? parseFloat(a.value) : 0;var bval = /\d/.test(b.value) ? parseFloat(b.value) : 0;return(aval == bval ? 0 : (aval > bval ? 1 : -1));} // function CompareRowOfNumbers()function GetDateSortingKey(format, text) {if (format.length < 1) {return "";}format = format.toLowerCase();text = text.toLowerCase();text = text.replace(/^[^a-z0-9]*/, "");text = text.replace(/[^a-z0-9]*$/, "");if (text.length < 1) {return "";}text = text.replace(/[^a-z0-9]+/g, ",");var date = text.split(",");if (date.length < 3) {return "";}var d = 0, m = 0, y = 0;for (var i = 0; i < 3; i++) {var ts = format.substr(i, 1);if (ts == "d") {d = date[i];} else if (ts == "m") {m = date[i];} else if (ts == "y") {y = date[i];}}d = d.replace(/^0/, "");if (d < 10) {d = "0" + d;}if (/[a-z]/.test(m)) {m = m.substr(0, 3);switch (m) {case "jan" :m = String(1);break;case "feb" :m = String(2);break;case "mar" :m = String(3);break;case "apr" :m = String(4);break;case "may" :m = String(5);break;case "jun" :m = String(6);break;case "jul" :m = String(7);break;case "aug" :m = String(8);break;case "sep" :m = String(9);break;case "oct" :m = String(10);break;case "nov" :m = String(11);break;case "dec" :m = String(12);break;default    :m = String(0);}}m = m.replace(/^0/, "");if (m < 10) {m = "0" + m;}y = parseInt(y);if (y < 100) {y = parseInt(y) + 2000;}return "" + String(y) + "" + String(m) + "" + String(d) + "";} // function GetDateSortingKey()</script></body>
</html>

这是单击标题时进行排序的 JavaScript。JavaScript 可以在网页的任何地方，在 HEAD 或 BODY 区域，在表单的上方或下方。

JavaScript 只有一个地方可以定制，即在 JavaScript 代码中标记的地方。从顶部向下大约 14 行。变量TableIDvalue的值需要是table标签的id值。

在示例中，表格标签的 id 值为“indextable”。因此，JavaScript 中的行读取

var TableIDvalue = "索引表";

当 HTML 表有很多数据时，使信息列可排序会很有用。

实现表排序

要对自己的表进行排序，必须准备好表：

table 标签需要一个 id 值，一个在页面上唯一的值。JavaScript 需要在其一个自定义点中指定 id 值。
表头区域需要在tad标签之间，正文区域需要在tbody标签之间。
- 将<thead>标记放在开始表头区域的<tr>标记之前。
- 将</thead>标记紧跟在结束表头区域的</tr>标记之后。
- 将<tbody>标记放在开始表格正文区域的<tr>标记之前。
- 将</tbody>标记紧跟在结束表格主体区域的</tr>标记之后。
如果没有 thead 和 tbody 标签，浏览器可能会拒绝排序，或者，如果它确实排序，标题行本身可能会被错误地排序，就好像它是表体行一样。

使用示例表的代码查看 thead 和 tbody 标记的放置位置。
要启用排序的列的标题文本需要一个链接。我将向您展示如何制作这些链接。

JavaScript 将对三种不同类型内容的列进行排序：

文本。
数字。
日期。

每种类型的内容的链接在下面各自的部分中进行了说明。

标题文本的链接取决于要排序的列中的内容类型。内容类型被发送到执行排序的 JavaScript 函数。

该链接还取决于列号。列号被发送到执行排序的 JavaScript 函数。最左边的列是第 0 列。接下来是第 1 列。然后是 2。依此类推。

这些链接是常规的 A 标签链接。如果您愿意，可以使用 span 标签。有关操作方法信息，请参阅不带“A”标记的链接文章。

对表格中的文本列进行排序

文本内容可以是任何类型的文本。通常，它至少包含一些字母。

出于排序目的，非字母或数字的字符将被忽略。HTML 标记也被忽略。如果内容大于 25 个可见的字母数字字符，则排序时仅考虑前 25 个。

这是文本列排序链接href值（列号来自示例表）：

href="javascript:SortTable(0,'T');"

JavaScript 函数 SortTable() 在对文本列进行排序时采用两个参数：

列号。最左边的列是数字 0。下一列是数字 1。然后是 2。依此类推。
内容的类型。为文本内容指定“T”。

这是一个示例实现：

<th><a href="javascript:SortTable(0,'T');">Author</a></th>

对表中的数字列进行排序

一列数字可能有普通数字、整数或小数。这些数字可以带有任何符号。例如，它可能包含货币符号。或“%”字符。

当对数字进行排序时，排序会忽略除数字、小数点、减号和加号之外的任何字符。

这是数字列排序链接href值（列号来自示例表）：

href="javascript:SortTable(2,'N');"

JavaScript 函数 SortTable() 在对数字列进行排序时采用两个参数：

列号。
内容的类型。指定“N”对一列数字进行排序。

这是一个示例实现：

<th><a href="javascript:SortTable(2,'N');">Rating</a></th>

对表中的日期列进行排序

日期可以用许多不同的方式书写。示例：2012 年 9 月 5 日、2012 年 9 月 5 日、2012 年 9 月 5 日、2012 年9 月 5 日、2012 年 9 月 5 日

日期中的元素是日、月和年。通常，顺序写为月-日-年或日-月-年。

要使排序在日期上起作用，这两项必须为真：

对于列中的每个日期，日期元素的顺序都是相同的。
至少一个非字母数字字符分隔日期元素。

特殊月份日期元素考虑。

如果使用月份名称而不是其编号，则必须至少使用前 3 个字母，并且必须是英文月份名称。月份名称不区分大小写。例如，“二月”、“二月”和“二月”。可以全部使用而不是月份 2。

（可以修改 JavaScript 以接受其他语言。编辑将在 GetDateSortingKey() 函数的 switch() 语句中。）

月份名称和月份编号可以在同一列可排序日期中使用。

特殊年份日期元素考虑。

如果使用一位数或两位数的年份，则假定年份以“20”开头以进行排序。例如，假设 12 年是 2012 年。并且假设第 3 年是 2003 年。

这是日期列排序链接href值（列号来自示例表）：

href="javascript:SortTable(3,'D','mdy');"

为了对一列日期进行排序，JavaScript 函数 SortTable() 采用三个参数：

列号。
内容的类型。指定“D”对日期列进行排序。
日期元素的序列。对月-日-年使用“mdy”，对日-月-年使用“dmy”。对于其他序列，相应地排列字母“d”、“m”和“y”。

这是一个示例实现：

<th><a href="javascript:SortTable(3,'D','mdy');">Review Date</a></th>

当第一个可排序的列标题文本已被链接时，可以测试该实现。然后，链接任何其他列的标题文本以使其可排序。

表格排序

JavaScript 有一个地方可以自定义，table 标签的 id 值。每个可排序列的表头文本都链接到 JavaScript。

单击可排序列的标题文本时，表格的行将根据单击的列进行排序。第二次单击同一列会反转排序。

使用示例表的 HTML 代码作为实现您自己的表排序的指南。