JavaScript实现表格排序

Table sorter包括JavaScript和一点CSS,能够让原始的html table变得可以分别按照各栏数据值,对各行排序。效果在表头任意一个栏目中点击一下,下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序再次点击该栏目,变更为降序排序点击其它栏目,则按其它栏目的值重新排序注意,排序时,栏目奇偶行的背景色保持奇数白色、偶数浅灰色要求不能改动原html,只能够添加js
摘要由CSDN通过智能技术生成

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", 
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值