使用 JavaScript 进行HTML表格排序

allway2

已于 2022-03-31 16:27:15 修改

阅读量1.1k

点赞数

文章标签： javascript

于 2022-03-31 16:26:43 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/123876179

版权

本文介绍了一种使用JavaScript实现HTML表格数据排序的方法。通过单击表头，表格的行可以根据作者、书名、评分和评论日期等列进行升序或降序排序。JavaScript代码包括了对文本、数字和日期内容的排序处理，并提供了如何自定义和应用到自己表格的指南。

摘要由CSDN通过智能技术生成

当 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 Sort
             Version 1.1
             August 17, 2016
             Updated GetDateSortingKey() to correctly sort two-digit months and days numbers with leading 0.
             Version 1.0, July 3, 2011

             Will Bontrager
             https://www.willmaster.com/
             Copyright 2011,2016 Will Bontrager Software, LLC

             This software is provided "AS IS," without
             any warranty of any kind, without even any
             implied warranty such as merchantability
             or fitness for a particular purpose.
             Will Bontrager Software, LLC grants
             you a royalty free license to use or
             modify this software provided this
             notice 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 代码作为实现您自己的表排序的指南。

allway2

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫