JavaScript实现表格排序-白红宇

JavaScript实现表格排序

阅读量：488 次

发布时间：2019-03-07

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

技术文档 - 表格排序功能开发

本文介绍了一个基于 JavaScript 和 CSS 的表格排序组件，能够实现将原始 HTML 表格按照用户选择的列进行升序或降序排序，同时保留表格干净的外观和一致的样式表达。

功能描述

点击任一表头单元格，该单元格下方所有行数据将根据该单元格内容进行升序排列。如果再次点击相同单元格，排序方向将翻转，变为降序。

点击其他表头单元格，会触发重新排序，排序依据变为所选单元格的内容。

排序期间，体系会自动修复表格的样式状态，确保奇偶行的背景色呈现一致要求（奇数行白色，偶数行浅灰色）。

技术实现

模块化设计

JavaScript 代码采用严格模式，遵循"尽量小的模块化"原则，将功能拆分为：
- getAllTables()：获取页面中所有表格元素。
- makeSort()：判断并处理可排序表格。
- changeStyle()：根据排序状态切换表头样式。
- sortByTh()：执行具体的排序逻辑。

不依赖类库

使用的是 native 的 DOM API，确保在所有现代浏览器环境下正常运行，无外部依赖。

事件处理机制

每个表头单元格定义一个点击事件处理函数，事件处理逻辑分三步：

根据点击单元格确定其列索引。

调整表头样式以反映新的排序状态。

根据指定列的内容重新排序主表体。

样式设计

表格的整体样式采用 CSS 布局，保证一致性和美观性。

提供升序和降序的可视化标识：
- 使用 CSS 背景图片增强互动感知。
- .ascend 和 .descend 类控制相应的样式态。

部分代码解析

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

测试与验证

测试环境准备

打开浏览器，导入 index.html 文件。

确保网络环境下能够加载 sorter.js 和 sorter.css。

功能测试

测试各表格的初始状态。

按各表头单元格进行点击，验证排序效果。

切换排序方向（ ascend <-> descend ）。

切换其他表头单元格，检查重新排序情况。

样式验证

检查奇偶行的颜色是否正确。

验证排序状态的背景图片是否正确显示。

确认表头单元格样式是否正常切换。

此系统设计既保证了丰富的功能性，又维持了良好的可维护性，适用于多种表格排序场景。

转载地址：http://skhcz.baihongyu.com/

你可能感兴趣的文章