js实现表格table的升序降序功能

最新推荐文章于 2024-07-25 12:10:52 发布

韩大帅666

最新推荐文章于 2024-07-25 12:10:52 发布

阅读量7.4k

点赞数 1

分类专栏：排序文章标签：排序

本文链接：https://blog.csdn.net/u014801403/article/details/53501222

版权

排序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义表格排序(JS)</title>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
(function($){
    //插件
    $.extend($,{
        //命名空间
        sortTable:{
            sort:function(tableId,Idx){
                var table = document.getElementById(tableId);
                var tbody = table.tBodies[0];
                var tr = tbody.rows;
        
                var trValue = new Array();
                for (var i=0; i<tr.length; i++ ) {
                    trValue[i] = tr[i];  //将表格中各行的信息存储在新建的数组中
                }
        
                if (tbody.sortCol == Idx) {
                    trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
                } else {
                    //trValue.sort(compareTrs(Idx));  //进行排序
                    trValue.sort(function(tr1, tr2){
                        var value1 = tr1.cells[Idx].innerHTML;
                        var value2 = tr2.cells[Idx].innerHTML;
                        return value1.localeCompare(value2);
                    });
                }
        
                var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果
                for (var i=0; i<trValue.length; i++ ) {
                    fragment.appendChild(trValue[i]);
                }
        
                tbody.appendChild(fragment); //将排序的结果替换掉之前的值
                tbody.sortCol = Idx;
            }
        }
    });          
})(jQuery);
</script>
<style type="text/css">
    * {
        padding:0;
        margin:0;
    }

    body {
        font-family:verdana;
        font-size:12px;
    }

    .content {
        width:550px;
        margin:20px auto;
    }

    .content h1 {
        font-family:'微软雅黑';
        font-size:18px;
        padding-bottom:5px;
    }

    table {
        width:100%;
    }

    th, td {
        padding:6px 0;
        text-align:center;
    }

    th {
        background-color:#007D28;
        color:#ffffff;
    }
    
    tr {
        background-color:#E8FFE8;
    }
    
    .odd {
        background-color:#FFF3EE;
    }
    
    .highlight {
        background-color:#FFF3EE;
}

</style>
</head>

<body>
<table summary="user infomation table" id="tableSort">
        <thead>
            <tr>
                <th οnclick="$.sortTable.sort('tableSort',0)" style="cursor: pointer;">会员ID</th>
                <th οnclick="$.sortTable.sort('tableSort',1)" style="cursor: pointer;">会员名</th>
                <th οnclick="$.sortTable.sort('tableSort',2)" style="cursor: pointer;">邮箱</th>
                <th οnclick="$.sortTable.sort('tableSort',3)" style="cursor: pointer;">会员组</th>
                <th οnclick="$.sortTable.sort('tableSort',4)" style="cursor: pointer;">城市</th>
                <th οnclick="$.sortTable.sort('tableSort',5)" style="cursor: pointer;">注册时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>126</td>
                <td>webw3c</td>
                <td>este@126.com</td>
                <td>普通会员</td>
                <td>北京</td>
                <td>2011-04-13</td>
            </tr>
            <tr>
                <td>145</td>
                <td>test001</td>
                <td>test001@126.com</td>
                <td>中级会员</td>
                <td>合肥</td>
                <td>2011-03-27</td>
            </tr>
            <tr>
                <td>116</td>
                <td>wuliao</td>
                <td>wuliao@126.com</td>
                <td>普通会员</td>
                <td>南昌</td>
                <td>2011-04-01</td>
            </tr>
            <tr>
                <td>129</td>
                <td>tired</td>
                <td>tired@126.com</td>
                <td>中级会员</td>
                <td>北京</td>
                <td>2011-04-06</td>
            </tr>
            <tr>
                <td>155</td>
                <td>tiredso</td>
                <td>tireds0@126.com</td>
                <td>中级会员</td>
                <td>武汉</td>
                <td>2011-04-06</td>
            </tr>
            <tr>
                <td>131</td>
                <td>javascript</td>
                <td>js2011@126.com</td>
                <td>中级会员</td>
                <td>武汉</td>
                <td>2011-04-08</td>
            </tr>
            <tr>
                <td>132</td>
                <td>jQuery</td>
                <td>jQuery@126.com</td>
                <td>高级会员</td>
                <td>北京</td>
                <td>2011-04-12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>