本文共 4798 字，大约阅读时间需要 15 分钟。

������������ - ������������������������

��������������������������� JavaScript ��� CSS ��������������������������������������������� HTML ������������������������������������������������������������������������������������������������������������������������

������������

������������

������������������

// sorter.js"use strict";window.onload = function () {    var tables = getAllTables();    makeAllTablesSortable(tables);};function getAllTables() {    return document.getElementsByTagName("table");}function makeAllTablesSortable(tables) {    for (var i = 0; i < tables.length; i++) {        makeSortable(tables[i]);    }}function makeSortable(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) {            th[i].className = (th[i].className.indexOf("descend") > -1) ?                 th[i].className.replace("descend", "ascend") :                 (th[i].className.indexOf("ascend") > -1) ?                 th[i].className.replace("ascend", "descend") :                 th[i].className += " descend";        } else {            th[i].className = th[i].className.replace("descend", "").replace("ascend", "");        }    }}function sortByTh(table, index, className) {    var action = className.indexOf("descend") > -1 ? "descend" : "ascend";    var rows = table.getElementsByTagName("tr");    var tbody = table.getElementsByTagName("tbody")[0];    var sortedRows = [];        for (var i = 1; i < rows.length; i++) {        sortedRows.push(rows[i]);    }        sortedRows.sort(function (a, b) {        return action === "descend" ?             a.cells[index].innerHTML > b.cells[index].innerHTML :            a.cells[index].innerHTML < b.cells[index].innerHTML;    });        for (var i = 0; i < sortedRows.length; i++) {        tbody.appendChild(sortedRows[i]);    }}

CSS ������������

���������������������

table {    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");}

���������������

������������������������������������������������������������������������������������������������������������������������