排序列表

来源：互联网发布：淘宝原创服装品牌编辑：程序博客网时间：2024/05/16 11:40
要求：1点击列头，可进行该列排序
2可进行升序和降序牌列的更换
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>排序</title>    <style>        thead th{            position: relative;        }        .onclick-asc:after{            content: "";            display: block;            width: 6px;            height: 6px;            border-left: 3px solid #999;            border-bottom: 3px solid #999;            transform: rotate(-45deg);            position: absolute;            top: 4px;            right: 18px;        }        .onclick-desc:after{            content: "";            display: block;            width: 6px;            height: 6px;            border-left: 3px solid #999;            border-bottom: 3px solid #999;            transform: rotate(135deg);            position: absolute;            top: 8px;            right: 18px;        }    </style></head><body>    <table align="center" border="1" cellspacing="0" cellpadding="0" width="800">            <thead>                <tr>                    <th>学号</th>                    <th>姓名</th>                    <th>语文</th>                    <th>数学</th>                    <th>英语</th>                    <th>总分</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>张三</td>                    <td>100</td>                    <td>100</td>                    <td>100</td>                    <td>300</td>                </tr>                <tr>                    <td>2</td>                    <td>李四</td>                    <td>98</td>                    <td>82</td>                    <td>90</td>                    <td>270</td>                </tr>                <tr>                    <td>3</td>                    <td>王五</td>                    <td>100</td>                    <td>70</td>                    <td>95</td>                    <td>265</td>                </tr>                <tr>                    <td>4</td>                    <td>赵里</td>                    <td>100</td>                    <td>100</td>                    <td>90</td>                    <td>290</td>                </tr>                <tr>                    <td>5</td>                    <td>柳次</td>                    <td>100</td>                    <td>80</td>                    <td>100</td>                    <td>280</td>                </tr>                <tr>                    <td>6</td>                    <td>李希</td>                    <td>85</td>                    <td>85</td>                    <td>85</td>                    <td>255</td>                </tr>                <tr>                    <td>7</td>                    <td>陈久</td>                    <td>95</td>                    <td>95</td>                    <td>95</td>                    <td>285</td>                </tr>                <tr>                    <td>8</td>                    <td>Andy</td>                    <td>94</td>                    <td>94</td>                    <td>94</td>                    <td>282</td>                </tr>                <tr>                    <td>9</td>                    <td>Simon</td>                    <td>80</td>                    <td>80</td>                    <td>80</td>                    <td>240</td>                </tr>                <tr>                    <td>10</td>                    <td>Lilly</td>                    <td>100</td>                    <td>70</td>                    <td>75</td>                    <td>245</td>                </tr>            </tbody>        </table></body><script>    (function(){        var oTd=document.querySelector('table').tHead.rows[0].children;        var status='asc';        for(var i = 0, length1 = oTd.length; i < length1; i++){            var none;            (function(j){                oTd[i].style.cursor='pointer';                oTd[j].onclick=function(){                    status = status=='asc'?'desc':'asc';                    for(var i= 0, length =oTd.length; i < length; i++){                        oTd[i].className='';                    };                    if (status=='asc') {                        status=='desc';                        this.className='onclick-asc';                    }else{                        this.className='onclick-desc';                    }                    sort(j,status);                };            })(i);        };    })();    function sort(index,status){        var oTb1=document.querySelector('table');        var ary=[];        for(var i = 0, length1 = oTb1.tBodies[0].rows.length; i < length1; i++){            ary.push(oTb1.tBodies[0].rows[i]);        };        ary.sort(function(o1,o2){            var val1=o1.children[index].innerHTML;            var val2=o2.children[index].innerHTML;            if(index==1){                var length=val1.length<val2.length?val1.length:val2.length;                for(var i = 0; i < length; i++){                    if(val1[i]=val2[i]){                        continue;                    }else{                        if (status=='asc') {                            return val2[i]>val1[i]?1:-1;                        }else{                            return val1[i]>val2[i]?1:-1;                        };                    };                };                return status=='asc'?val2.length-val1.length:val1.length-val2.length;            };            return status=='asc'? val2-val1:val1-val2;        });        for(var i = 0, length1 = ary.length; i < length1; i++){            oTb1.tBodies[0].appendChild(ary[i]) ;        };    }</script>   </html>
效果图：
这里写图片描述
1 0