js table 排序 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 14px;
            -webkit-user-select: none;
        }
        
        .box {
            width: 400px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid;
            border-radius: 10px;
            box-shadow: 3px 3px 10px 0 #dbeedb;
        }
        
        .box thead {
            background-color: #dbeedb;
        }
        
        .box tr {
            height: 35px;
        }
        
        .box tr th.cursor {
            cursor: pointer
        }
        
        .box tr td {
            width: 100px;
            text-align: center;
        }
        
        .box tbody tr:nth-child(even) {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="box">
        <table id="tb" cellspacing="0" cellpadding="0" border="1px soild">
            <thead>
                <tr>
                    <th class="cursor">姓名</th>
                    <th class="cursor">年龄</th>
                    <th class="cursor">武力</th>
                    <th>性别</th>
                </tr>
                <tbody>
                    <tr>
                        <td>aaaa</td>
                        <td>23</td>
                        <td>78</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>bbbb</td>
                        <td>22</td>
                        <td>84</td>
                        <td>女</td>
                    </tr>
                    <tr>
                        <td>cccc</td>
                        <td>26</td>
                        <td>85</td>
                        <td>男</td>

                    </tr>
                    <tr>
                        <td>dddd</td>
                        <td>32</td>
                        <td>84</td>
                        <td>女</td>
                    </tr>
                </tbody>
            </thead>
        </table>
    </div>
    <script type="text/javascript">
        var oTab = document.getElementById("tb")
        var thead = oTab.tHead;
        var ths = thead.rows[0].cells;
        var tbody = oTab.tBodies[0];
        var oRows = tbody.rows;

        function sort() {
            _this = this;
            _this.sorted = _this.sorted * (-1)
            var bodyrows = Array.prototype.slice.call(oRows);
            bodyrows.sort(function(a, b) {
                var ahtml = a.cells[_this._index].innerHTML;
                var bhtml = b.cells[_this._index].innerHTML;
                if (isNaN(ahtml) || isNaN(bhtml)) {
                    return (ahtml.localeCompare(bhtml)) * (_this.sorted);
                } else {
                    return (parseFloat(ahtml) - parseFloat(bhtml)) * (_this.sorted)
                }
            });
            var prag = document.createDocumentFragment();
            for (let b = 0; b < bodyrows.length; b++) {
                // var tr = document.createElement("tr");
                // for (let c = 0; c < ths.length; c++) {
                //     var td = document.createElement("td");
                //     td.innerHTML = bodyrows[b].cells[c].innerHTML;
                //     tr.appendChild(td);

                // }
                prag.appendChild(bodyrows[b]);
            }
            //tbody.innerHTML = ""
            tbody.appendChild(prag)
        };
        for (let i = 0; i < ths.length; i++) {
            if (ths[i].className === "cursor") {
                ths[i]._index = i;
                ths[i].sorted = -1;
                ths[i].onclick = function() {
                    sort.call(this);
                }
            }
        }
    </script>
</body>

</html>

 

posted @ 2020-12-17 10:44  howhy  阅读(79)  评论(0)    收藏  举报