程序博客网 > 华硕黄静 知乎

我的第二个JavaScript脚本--对table中的数据排序

来源：互联网 发布：华硕黄静 知乎 编辑：程序博客网 时间：2024/06/01 19:44
    已经有很多位大侠已经在网络上贡献了自己的对table中的数据进行排序操作了，不过自己还是写了一个比较简单的排序算法练习和熟悉一下javascript。
    其实现的主要思想是：首先得到要排序的表的部分，然后将表的每行数据作为一个数据单元存放在一个数组中，然后根据需要制定各个sort排序函数。
    缺点：不是很灵活，有些函数的代码的扩展性不是很好，哈哈。
    注意：对汉字进行排序的时候，要使用a.localeCompare(b)函数，不能使用简单的>, =, <运算符。
    下面是程序的代码：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><head>
        <style type="text/css">
        #datatable{
            table-layout:fixed;
            width:1000px;
            border-collapse:collapse;
            text-align:center;
           
        }
        #datatable th,td{
            border:1px solid #aaa;
   
        }
       
        #datatable thead th{
            border-bottom:2px solid #3D580B;
            background-color:#AADDFF;
            padding:10px 0px;
            width: 60px;
        }
        </style>
    <script language="JavaScript">
        function sortColumn(tablename,ColumnID,TextType,SortType)
        {
            var thetable = document.getElementById(tablename);
           
            var    rowsArr = Array();
            for(var i =0; i<thetable.rows.length;i++)
            {
                rowsArr.push(thetable.rows[i]);
            }

            if( TextType.toLowerCase() == 'number' && SortType.toLowerCase() == 'asc' )
            {
                rowsArr.sort(sortNumberAsc);
            }else if(TextType.toLowerCase() == 'char' && SortType.toLowerCase() == 'asc')
            {
                rowsArr.sort(sortCharAsc);
            }else if( TextType.toLowerCase() == 'number' && SortType.toLowerCase() == 'desc' )
            {
                rowsArr.sort(sortNumberDesc);
            }else if(TextType.toLowerCase() == 'char' && SortType.toLowerCase() == 'desc')
            {
                rowsArr.sort(sortCharDesc);
            }
           
            function sortNumberAsc(a,b)
            {
                a = a.cells[ColumnID].innerText?a.cells[ColumnID].innerText:a.cells[ColumnID].innerHTML;
                b = b.cells[ColumnID].innerText?b.cells[ColumnID].innerText:b.cells[ColumnID].innerHTML;
                if(parseFloat(a)>parseFloat(b))
                    return 1;
                else if( parseFloat(a)< parseFloat(b))
                    return -1;
                else return 0;
            }
           
            function sortCharAsc(a,b)
            {
                a = a.cells[ColumnID].innerText?a.cells[ColumnID].innerText:a.cells[ColumnID].innerHTML;
                b = b.cells[ColumnID].innerText?b.cells[ColumnID].innerText:b.cells[ColumnID].innerHTML;
                return a.localeCompare(b);
            }
           
            function sortNumberDesc(a,b)
            {
                a = a.cells[ColumnID].innerText?a.cells[ColumnID].innerText:a.cells[ColumnID].innerHTML;
                b = b.cells[ColumnID].innerText?b.cells[ColumnID].innerText:b.cells[ColumnID].innerHTML;
                if(parseFloat(a) < parseFloat(b))
                    return 1;
                else if( parseFloat(a) > parseFloat(b))
                    return -1;
                else return 0;
            }
           
            function sortCharDesc(a,b)
            {
                a = a.cells[ColumnID].innerText?a.cells[ColumnID].innerText:a.cells[ColumnID].innerHTML;
                b = b.cells[ColumnID].innerText?b.cells[ColumnID].innerText:b.cells[ColumnID].innerHTML;
                return -a.localeCompare(b);
            }
            for( i=0; i<rowsArr.length;i++)
            {
                thetable.appendChild(rowsArr[i]);
            }
        }
    </script>
</head>
<body>
<table id="datatable">
    <thead>
        <tr>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',0,'number','asc');">注册日期<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',0,'number','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',1,'char','asc');">省<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',1,'char','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',2,'number','asc');">PV<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',2,'number','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',3,'number','asc');">IP数<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',3,'number','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',4,'number','asc');">一周内登陆次数<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',4,'number','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',5,'number','asc');">一平均在线时间<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',5,'number','desc');"></th>
            <th><img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/2/l_66c9a059bd648346689ebef01388afc4.gif" onclick="sortColumn('databody',6,'number','asc');">一周内空间浏览次数<img src="http://b0.ac-images.cdnmyspace.cn/cnimages01/1/l_57660fa7cc99aa3c97e9204e3815e5fc.gif" onclick="sortColumn('databody',6,'number','desc');"></th>
        </tr>
    </thead>
    <tbody id="databody">
        <tr>
            <td>20080404</td>
            <td>山东</td>
            <td>30</td>
            <td>0</td>
            <td>5</td>
            <td>38.23</td>
            <td>100</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>山东</td>
            <td>14</td>
            <td>0</td>
            <td>6</td>
            <td>20.81</td>
            <td>23</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>内蒙古</td>
            <td>13</td>
            <td>0</td>
            <td>6</td>
            <td>35.71</td>
            <td>112</td>
        </tr>
        <tr>
            <td>20080401</td>
            <td>山东</td>
            <td>12</td>
            <td>0</td>
            <td>4</td>
            <td>19.98</td>
            <td>7</td>
        </tr>
        <tr>
            <td>20080406</td>
            <td>网吧</td>
            <td>11</td>
            <td>0</td>
            <td>6</td>
            <td>39.80</td>
            <td>92</td>
        </tr>
        <tr>
            <td>20080406</td>
            <td>内蒙古</td>
            <td>9</td>
            <td>0</td>
            <td>7</td>
            <td>35.85</td>
            <td>18</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>内蒙古</td>
            <td>9</td>
            <td>0</td>
            <td>4</td>
            <td>31.24</td>
            <td>29</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>黑龙江</td>
            <td>8</td>
            <td>0</td>
            <td>7</td>
            <td>12.91</td>
            <td>55</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>山东</td>
            <td>8</td>
            <td>0</td>
            <td>5</td>
            <td>9.87</td>
            <td>4</td>
        </tr>
        <tr>
            <td>20080403</td>
            <td>山东</td>
            <td>8</td>
            <td>0</td>
            <td>5</td>
            <td>36.27</td>
            <td>18</td>
        </tr>
        <tr>
            <td>20080402</td>
            <td>山东</td>
            <td>8</td>
            <td>0</td>
            <td>4</td>
            <td>18.57</td>
            <td>18</td>
        </tr>
        <tr>
            <td>20080406</td>
            <td>山东</td>
            <td>8</td>
            <td>0</td>
            <td>3</td>
            <td>48.47</td>
            <td>11</td>
        </tr>
        <tr>
            <td>20080402</td>
            <td>黑龙江</td>
            <td>6</td>
            <td>0</td>
            <td>4</td>
            <td>5.32</td>
            <td>1</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>山东</td>
            <td>5</td>
            <td>0</td>
            <td>7</td>
            <td>25.92</td>
            <td>14</td>
        </tr>
        <tr>
            <td>20080402</td>
            <td>山东</td>
            <td>5</td>
            <td>0</td>
            <td>4</td>
            <td>7.71</td>
            <td>1</td>
        </tr>
        <tr>
            <td>20080404</td>
            <td>山东</td>
            <td>5</td>
            <td>0</td>
            <td>3</td>
            <td>29.66</td>
            <td>17</td>
        </tr>
    </tbody>
</table>
</body>
</html>
华硕黄静 知乎 华硕黄静 知乎
原创粉丝点击
热门IT博客
看日漫原版的软件看日漫原版的软件
亚马逊listing优化亚马逊listing优化
手机淘宝下载安装2016
日程安排软件哪个好
怎样做淘宝代理商
淘宝菜鸟驿站怎么加盟
知乎欧美乐坛
虚拟定位软件哪个好
荒神罪修改地图数据
魔力宝贝连击奥义数据
中文相似度 算法
mysql 5.1.63.tar.gz
逆袭百度云网络剧
java两种时间格式转换
无主之地前传mac存档
如何加入淘宝网热卖
天谕烈体型捏脸数据
淘宝代写课题靠谱呢吗
淘宝 君仔体育
mac新建智能文件夹
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 万科桃源里为什么那么便宜 九里桃源 兴龙九里桃源 秦皇岛九里桃源 合肥华润桃源里 华润桃源里电话 增城万科桃源里 桃源里怎么样 华润桃源里 桃源里 桃片 桃片糕 建始桃片糕 桃片糕的做法 桃片糕图片 云阳桃片糕 桃白白 桃皮绒面料 桃皮绒是什么面料 桃皮绒 桃皮绒抱枕 桃皮绒图片 桃皮绒的缺点 什么是桃皮绒面料 桃皮绒和麂皮绒 麝皮绒 仿绒皮 桃叶儿那尖上尖是什么歌 桃笔顺笔画顺序 桃笔画 桃简笔画 桃的笔画顺序 桃笔画顺序怎么写 桃的笔画 桃字的笔画笔顺怎么写 桃的笔顺笔画顺序表 桃的简笔画 桃的笔顺笔画顺序 桃字笔画顺序 桃字笔顺笔画顺序 桃笔画笔顺

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里