表格排序和加升符、降符

来源：互联网发布：北京软件行业协会电话编辑：程序博客网时间：2024/05/17 15:01
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            table{border:1px solid black; width: 500px;border-collapse: collapse; }            tr td{border:1px solid black;}            td{position: relative;}            .up:after,.down:after{                    content: "";                    width: 0;                    height: 0;                    border-width:  5px;                    border-style: solid;                    position: absolute;                    right: 5px;            }            .up:after{                    border-color: transparent transparent #f00 transparent;                    top: 2px;            }            .down:after{                    border-color:  #f00 transparent transparent transparent;                    top: 8px;            }        </style>    </head>    <body>        <table id="tb1">            <thead align="center" <tr>                <td>学号</td>                <td>姓名</td>                <td>语文</td>                <td>数学</td>                <td>总分</td>                <td>操作</td>                </tr>            </thead>            <tbody align="center">                <tr>                    <td>7</td>                    <td>Alexander</td>                    <td>90</td>                    <td>96</td>                    <td>186</td>                    <td></td>                </tr>                <tr>                    <td>1</td>                    <td>小明明</td>                    <td>100</td>                    <td>100</td>                    <td>200</td>                    <td></td>                </tr>                <tr>                    <td>2</td>                    <td>张三</td>                    <td>90</td>                    <td>60</td>                    <td>150</td>                    <td></td>                </tr>                <tr>                    <td>3</td>                    <td>李四</td>                    <td>59</td>                    <td>80</td>                    <td>139</td>                    <td></td>                </tr>                <tr>                    <td>4</td>                    <td>王五</td>                    <td>80</td>                    <td>85</td>                    <td>165</td>                    <td></td>                </tr>                <tr>                    <td>5</td>                    <td>小明</td>                    <td>56</td>                    <td>40</td>                    <td>96</td>                    <td></td>                </tr>                <tr>                    <td>6</td>                    <td>Victor</td>                    <td>78</td>                    <td>88</td>                    <td>166</td>                    <td></td>                </tr>                <tr>                    <td>8</td>                    <td>Amanda</td>                    <td>96</td>                    <td>99</td>                    <td>195</td>                    <td></td>                </tr>            </tbody>        </table>    </body>    <script>    //点击排序    (function(){        var oTds = document.getElementById('tb1').tHead.rows[0].children;        for(var i=0;i<oTds.length-1;i++){            (function(j){                oTds[j].style.cursor = 'pointer';                var status = 'asc';                oTds[j].onclick = function(){                    if(status =='asc'){                        oTds[j].className='up';                        status = 'desc';                    }else{                        oTds[j].className='down';                        status = 'asc';                    }                    // status = status=='asc'?'desc':'asc';                    sort(j,status);                };            })(i);        }    })()    //给表格进行排序    function sort(index, status){        var tb1 = document.getElementById('tb1');        var ary = [];        for(var i=0;i<tb1.tBodies[0].rows.length;i++){            ary.push(tb1.tBodies[0].rows[i]);        }        ary.sort(function(o1,o2){            var val1 = o1.children[index].innerHTML;            var val2 = o2.children[index].innerHTML;            if(index==1){//对姓名排序                return status=='desc' ? val1.localeCompare(val2) : val2.localeCompare(val1);             }            //对数字排序            return status=='desc' ? val2 - val1 : val1 - val2;        });        for (var i=0;i<ary.length;i++){            tb1.tBodies[0].appendChild(ary[i]);        }    }    </script></html>
0 0