使用 JavaScript 进行HTML表格排序

我就是我 2023-09-30 12:09 22阅读 0赞

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

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

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

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

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

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

<!DOCTYPE html>
    
    <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 表有很多数据时，使信息列可排序会很有用。

#### 实现表排序 ####

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

1.  table 标签需要一个 id 值，一个在页面上唯一的值。JavaScript 需要在其一个自定义点中指定 id 值。
2.  表头区域需要在tad标签之间，正文区域需要在tbody标签之间。
    
     *  将<thead>标记放在开始表头区域 的<tr>标记之前。
     *  将</thead>标记紧跟在结束表头区域 的</tr>标记之后。
     *  将<tbody>标记放在开始表格正文区域 的<tr>标记之前。
     *  将</tbody>标记紧跟在结束表格主体区域 的</tr>标记之后。
    
    如果没有 thead 和 tbody 标签，浏览器可能会拒绝排序，或者，如果它确实排序，标题行本身可能会被错误地排序，就好像它是表体行一样。
    
    使用示例表的代码查看 thead 和 tbody 标记的放置位置。
3.  要启用排序的列的标题文本需要一个链接。我将向您展示如何制作这些链接。

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

1.  文本。
2.  数字。
3.  日期。

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

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

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

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

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

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

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

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

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

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