js移动表格数据和给表格数字排序

来源：互联网发布：戴尔游匣7557优化教程编辑：程序博客网时间：2024/05/17 09:06
》这里写图片描述
这里写图片描述
<!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;}        </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>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>7</td>                    <td>Alexander</td>                    <td>90</td>                    <td>96</td>                    <td>186</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>        <input type="button" value="移动" onclick="foo01()" />        <table id="tb2">            <thead align="center" <tr>                <td>学号</td>                <td>姓名</td>                <td>语文</td>                <td>数学</td>                <td>总分</td>                <td>操作</td>                </tr>            </thead>        </table>    </body>    <script>    function foo01(){        var oTb1 = document.getElementById('tb1').tBodies[0];        // <table>里没有定义<tr>所以<tbody>没有自动生成        var oTb2 = document.getElementById('tb2');        // 判断tBodies里是否还有rows        if (oTb1.rows.length > 0){            // 添加完成后，会把数据源从dom里移除            oTb2.appendChild(oTb1.rows[0]);        }    }    // 点击排序    (function(){        // 1. 获取到标题的行        var oTds = document.getElementById('tb1').tHead.rows[0].children;        // 2. 给每一个td绑定点击事件        // 操作不需要实现排序功能，所以需要做长度-1的处理        for (var i=0;i<oTds.length-1;i++){            (function(j){                oTds[j].style.cursor = 'pointer';                oTds[j].onclick = function(){                    sort(j);                };            })(i);        }    })();    /**     * 给表格进行排序     * @param {Object} index        需要给那一列进行排序     */    function sort(index){        var tb1 = document.getElementById('tb1');        // rows不是一个数组，它是nodeList所以没有sort方法。解决方法，声明一个数组用于保存rows的数据，再对数组进行排序        //var oRows = tb1.tBodies[0].rows.sort();        var ary = [];        // 迭代rows，把每个tr都放到数组里        for (var i=0;i<tb1.tBodies[0].rows.length;i++){            ary.push(tb1.tBodies[0].rows[i]);        }        if(index != 1){// 使用数学方式排序            ary.sort(function(o1, o2){                var val1 = o1.children[index].innerHTML;                var val2 = o2.children[index].innerHTML;                return val2 - val1;            });            for (var i=0;i<ary.length;i++){                tb1.tBodies[0].appendChild(ary[i]);// 没有显示的旧数据进行删除，追加的时候js会自动把旧有数据自动删除            }        }
0 0