js表头排序实现方法


Posted in Javascript onJanuary 16, 2015

本文实例讲述了js表头排序实现方法。分享给大家供大家参考。

具体实现方法如下:

<script type="text/javascript">

    //是否递减排序

    var isDescending = true;

    /*****************************************

    * 要排序的行必须放到<tbody></tbody>标签中

    * tableId:排序表格ID

    * colNo:排序的列号,即第几列,从0开始

    * startRowNo:排序的开始行号,从0开始

    * sortLength:要排序的行数,

    * type:排序列的类型

    */

    function sort(tableId, colNo ,startRowNo, sortLength, type)

    {

        //如果要排序的行数是1或是0,则不对其进行排序操作

        if(sortLength<=1){

            return;

        }

        var currTable = document.getElementById(tableId);

        var theHeader = currTable.outerHTML.substring(0, currTable.outerHTML.indexOf('<TBODY>')+7)

        var theFooter = currTable.outerHTML.substring(currTable.outerHTML.indexOf('</TBODY>')-8);

        //这里的行数是去掉表头表头行和表位行的行数

        var theRows = new Array(sortLength);

        //对表中的数据进行循环

        for(i=startRowNo; i<sortLength+startRowNo; i++)

        {

            theRows[i-startRowNo] = new Array(currTable.rows[i].cells[colNo].innerText.toLowerCase(), currTable.rows[i].outerHTML);

        }

        if(type.toUpperCase()=='NUMBER')

        {

            theRows.sort(compareNumber);

        }

        else if(type.toUpperCase()=='DATE')

            theRows.sort(compareDate);

        else if(type.toUpperCase()=='STRING')

            theRows.sort(compareString);

        var tableInfo=''

        for(j=0; j<theRows.length; j++)

        {

            tableInfo+=theRows[j][1];

        }

        isDescending = !isDescending;

        currTable.outerHTML= theHeader + tableInfo +theFooter;

        return ;

    }

    //对数字进行比较

    function compareNumber(x, y)

    {

        //对货币格式的数据进行转化

        a = x[0].excludeChars(",").trim();

        b = y[0].excludeChars(",").trim();

 

        if(a==""){a=0;}

        if(b==""){b=0;}

            if(isDescending)

            {

                return parseFloat(b) - parseFloat(a);

            }

            else

            {

                return parseFloat(a) - parseFloat(b);

            }

    }

    //对字符串进行比较

    function compareString(x, y)

    {

            if(isDescending)

            {

                if(x[0]>y[0]) return -1;

                else if(x[0]<y[0]) return 1;

                else return 0;

            }

            else

            {

                if(x[0]<y[0]) return -1;

                else if(x[0]>y[0]) return 1;

                else return 0;

            }

    }

    //对时间进行比较

    function compareDate(x,y){

        var arr=x[0].split("-"); 

        var starttime=new Date(arr[0],arr[1],arr[2]); 

        var starttimes=starttime.getTime(); 

        var arrs=y[0].split("-"); 

        var lktime=new Date(arrs[0],arrs[1],arrs[2]); 

        var lktimes=lktime.getTime();

         

        if(isDescending)

        {

            return lktimes - starttimes;

        }

        else

        {

            return starttimes - lktimes;

        }

    }

    //去除字符串中所有指定的字符串

    String.prototype.excludeChars = function(chars){

         var matching = new RegExp(chars , "g") ;

         return this.replace(matching , '') ;

    }

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
vue组件学习教程
Sep 09 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
js计算任意值之间随机数的方法
Jan 16 #Javascript
jquery事件preventDefault()方法用法实例
Jan 16 #Javascript
jQuery老黄历完整实现方法
Jan 16 #Javascript
jquery中one()方法的用法实例
Jan 16 #Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 #Javascript
用js判断是否为360浏览器的实现代码
Jan 15 #Javascript
jquery果冻抖动效果实现方法
Jan 15 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
生成卡号php代码
2008/04/09 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server