zoukankan      html  css  js  c++  java
  • 10.table.排序,arr.sort();appendChild();

    table排序:先用sort对tbody中的tr进行排序,然后用appendChild将每个tr按排好的顺序插入到父节点中;

    appendChild:此时分两步操作:1,先将tr从原父元素中删除,2再将tr插入到父元素末尾;

    sort:是数组的方法;arr.sort;而通过oTab.tBodies[0].rows获取的是tr元素集合;元素集合只有length.这个类似数组的属性,但无sort,splice等数组的方法;因此要讲元素集合转换成数组,方法如下:

    var arr=[];//定义一个空数组;

    for(var i=0;i<oTab.tBodies[0].rows.length;i++){

      arr[i]=oTab.tBodies[0].rows[i];//遍历将每一个tr添加到arr中;

    }

    比较函数:

    sort();方法接受比较函数:一般数组中装的是哪类,比较的参数就该写哪类;如:arr[]中是tr.那么,比较函数中function(tr1,tr2)参数也是tr1,tr2;

    比较tr行第一个单元格中的序号:

    function tNum(tr1,tr2){

      var n1=parseInt(tr1.cells[0].innerHTML);

      var n2=paresInt(tr2.cells[0].innerHTML);

      return n1-n2;

    }

    例子:重拍table中混乱的行;

    html:

    <body>
    <input id='btn1' type='button' value='排序'/>
    <table id='tab1' border='1px solid black' width='280px'>
        <thead>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
                <td>浩二</td>
                <td>24</td>
                <td></td>
            </tr>
            <tr>
                <td>1</td>
                <td>刘一</td>
                <td>23</td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td>张四</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>麻四</td>
                <td>23</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>王五</td>
                <td>29</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>张三</td>
                <td>26</td>
                <td></td>
            </tr>    
        </tbody>
    </table>
    </body>

    javascript代码:

    <script>
        window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            
            oBtn.onclick=function(){
                var aTr=oTab.tBodies[0].rows;
                
                //创建集合tr元素集的数组;
                var arr=[];
                for(var i=0;i<aTr.length;i++){
                    arr[i]=aTr[i];
                }
                //实现数组内部从小到大的排序;
                arr.sort(function(tr1,tr2){
                    var n1=parseInt(tr1.cells[0].innerHTML);
                    var n2=parseInt(tr2.cells[0].innerHTML);
                    
                    return n1-n2;
                });
                //alert(arr[1].cells[0].innerHTML);
                
                //按从小到大的顺序依次插入父元素;appendChild,1,先把元素从父元素删除,2,再添加到父元素;
                for(var i=0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            }
        }
    </script>
  • 相关阅读:
    属性,选择器和css
    笔记
    浏览器
    单位
    marquee 滚动标签
    双飞翼布局与圣杯布局
    随便看看吧
    光标的形状 颜色的表示方法
    如何实现浏览器title中的小图标
    解决浏览器兼容问题 补充
  • 原文地址:https://www.cnblogs.com/maoduoduo/p/3145170.html
Copyright © 2011-2022 走看看