JavaScript实现表格排序

今天药忘吃喽~ 2022-01-31 19:27 240阅读 0赞

**Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。**

效果

1.  在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序  
    按照字符串比较来确定顺序
2.  再次点击该栏目，变更为降序排序
3.  点击其它栏目，则按其它栏目的值重新排序
4.  注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色

要求

1.  不能改动原html，只能够添加js和css文件
2.  不能使用任何类库，只能用原生DOM API
3.  JavaScript必须模块化，JS的调用入口，必须按照下面的图示：

sorter.js:

"use strict";
    
    window.onload = function () {
        var tables = getAllTables();
        makeAllTablesSortalbe(tables);
    };
    
    //嵌入的话用下面两行..
    // var tables = getAllTables();
    // makeAllTablesSortalbe(tables);
    function getAllTables() {
        return document.getElementsByTagName("table");
    }
    
    
    function makeAllTablesSortalbe(tables) {
        for (var i = 0; i < tables.length; i++)
            makeSort(tables[i]);
    }
    
    //让列表变得可排序
    function makeSort(table) {
        var th = table.getElementsByTagName("th");
        for (var i = 0; i < th.length; i++) {
            //绑定按钮事件
            th[i].onclick = function () {
                var index = 0;
                changeStyle(th, this);
                //找出索引值
                for (var j = 0; j < th.length; j++) {
                    if (this == th[j])
                        index = j;
                }
                sortByTh(table, index, this.className);
            };
        }
    }
    
    //改变样式
    function changeStyle(th, t) {
        for (var i = 0; i < th.length; i++) {
    
            if (th[i] == t) {
    
                if (th[i].className.indexOf("descend") != -1 )
                    th[i].className = th[i].className.replace("descend", "ascend");
                else if (th[i].className.indexOf("ascend") != -1 )
                    th[i].className = th[i].className.replace("ascend", "descend");
                else
                    th[i].className += " descend";
    
            } else {
                th[i].className = th[i].className.replace("descend", "");
                th[i].className = th[i].className.replace("ascend", "");
            }
        }
    }
    
    //排序
    function sortByTh(table, index, className) {
        var action = className.indexOf("descend") != -1 ? "descend" : "ascend";
        var array = [];
        for (var i = 1; i < table.getElementsByTagName("tr").length; i++) {
            array[i-1] = table.getElementsByTagName("tr")[i];
        }
        array.sort(function (a, b) {
            //升序
            if (action == 'descend') {
                return a.cells[index].innerHTML <= b.cells[index].innerHTML;
            } else {
            //降序
                return a.cells[index].innerHTML >= b.cells[index].innerHTML;
            }
        });
    
        for (var i = 0; i < array.length; i++)
            table.getElementsByTagName("tbody")[0].appendChild(array[i]);
    }

CSS:

border: 1px solid gray;
        margin: 0;
        padding: 3px;
        border-collapse: collapse;
    }
    
    tr:nth-child(even),tr:hover {
        background-color: #DEDEDE;
    }
    
    th {
        text-align: left;
        background-color: #041A7F;
        color: white;
        font-weight:  bold;
        padding-right:16px;
    }
    
    .ascend, .descend {
        background-color: #A4B0FC;
        background-position: right;
        background-repeat: no-repeat;
    }
    
    .ascend {
        background-image: url("ascend.png");
    }
    
    .descend {
        background-image: url("descend.png");
    }

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sortable table</title>
        <link rel="stylesheet" type="text/css" href="sorter.css" />
        <script type="text/javascript" src="sorter.js"></script>
    </head>
    <body>
    <h1>Sortable table</h1>
    
    <h2>To-Do</h2>
    
    <table id="todo">
        <thead>
            <tr>
                <th>What?</th>
                <th>When?</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Paris Web 2007</td>
                <td>2007-11-15</td>
                <td>IBM La Defense / INSIA</td>
            </tr>
            <tr class="alternate">
                <td>Paris On Rails 2007</td>
                <td>2007-12-10</td>
                <td>Cite des Sciences</td>
            </tr>
            <tr>
                <td>Burger Quiz party</td>
                <td>2007-04-14</td>
                <td>Volta</td>
            </tr>
        </tbody>
    </table>
    
    <h2>Staff</h2>
    
    <table id="staff">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Latest checkin</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Richard</td>
                <td>Piacentini</td>
                <td>2007-03-27</td>
            </tr>
            <tr class="alternate">
                <td>Eric</td>
                <td>Daspet</td>
                <td>2007-03-28</td>
            </tr>
            <tr>
                <td>Aurore</td>
                <td>Jaballah</td>
                <td>2007-03-15</td>
            </tr>
        </tbody>
    </table>
    
    </body>
    </html>

sorter.css

table, tr *{
        border: 1px solid gray;
        margin: 0;
        padding: 3px;
        border-collapse: collapse;
    }
    
    tr:nth-child(even),tr:hover {
        background-color: #DEDEDE;
    }
    
    th {
        text-align: left;
        background-color: #041A7F;
        color: white;
        font-weight:  bold;
        padding-right:16px;
    }
    
    .ascend, .descend {
        background-color: #A4B0FC;
        background-position: right;
        background-repeat: no-repeat;
    }
    
    .ascend {
        background-image: url("ascend.png");
    }
    
    .descend {
        background-image: url("descend.png");
    }