《JavaScript高级程序设计》阅读笔记(十九):表格排序

简介:

排序代码

function SortTable(sTableID, iCol, sDataType){
    this.oTable=document.getElementById(sTableID);
    this.oTBody=this.oTable.tBodies[0];
    this.colDataRows=this.oTBody.rows;
    this.aTRs=[];
    this.iCol=iCol;
    this.sDataType=sDataType;
}

SortTable.prototype={
    convert:function(sValue, sDataType){
        switch(sDataType){
            case "int":
                return parseInt(sValue);
            case "float":
                return parseFloat(sValue);
            case "date":
                return new Date(sValue);
            default:
                return sValue.toString();
        }
    },
    generateCompareTRs:function(iCol, sDataType, that){
        return function compareTRs(oTR1,oTR2){
                    var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType),
                        vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
                    if(vValue1 < vValue2){
                        return -1;
                    } else if(vValue1 > vValue2){
                        return 1;
                    } else{
                        return 0;
                    }
               };
    },
    sort:function(){
        for(var i=0,l=this.colDataRows.length;i<l;i++){
            this.aTRs.push(this.colDataRows[i]);
        }
        if(this.oTable.sortCol === this.iCol){
            this.aTRs.reverse();
        } else {
            this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this));
        }

        var oFragment=document.createDocumentFragment();
        for(var i=0,l=this.aTRs.length;i<l;i++){
            oFragment.appendChild(this.aTRs[i]);
        }

        this.oTBody.appendChild(oFragment);
        this.oTable.sortCol = this.iCol;
    }
}

调用示例

function bindSortTable(sTableID, iCol, sDataType){
    var table=document.getElementById(sTableID),
        ftr=table.tHead.rows[0],
        tds=ftr.cells;
    if(tds[iCol]){
        tds[iCol].onclick=function(){
            var sortTable=new SortTable(sTableID, iCol, sDataType);
            sortTable.sort();
        }
    }
}

window.onload=function(){
    bindSortTable("tblSort",0);
    bindSortTable("tblSort",1);
    bindSortTable("tblSort",2,"int");
    bindSortTable("tblSort",3,"float");
    bindSortTable("tblSort",4,"date");
}

将table中的td顺序颠倒

function reverseTD(tbid){
    var table=document.getElementById(tbid),
        tbody=table.tBodies[0],
        trs=tbody.rows,
        cols=[];
    for(var i=0,j=trs.length;i<j;i++){
        cols = trs[i].cells;
        trs[i]=document.createElement("tr");
        for(var m=cols.length-1;m>=0;m--){
            trs[i].appendChild(cols[m]);
        }
    }
}

//Test
reverseTD("tableid");



 
 

本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
337 0
|
9月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
277 17
|
9月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
369 59
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
JavaScript 前端开发 程序员
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
JavaScript是Web标准语言,广泛应用于各类浏览器,造就了其最广泛部署的地位。Node.js的兴起扩展了JavaScript的使用场景,使其成为开发者首选语言。无论新手还是经验丰富的程序员,都能受益于学习JavaScript。[《JavaScript权威指南第7版》资源链接](https://zhangfeidezhu.com/?p=224)
1114 5
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
404 0
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
152 2
|
JavaScript Linux 开发工具
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!

热门文章

最新文章