码迷,mamicode.com
首页 > 编程语言 > 详细

表格排序

时间:2015-07-24 20:10:14      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="utf-8" />
        <title>ID排序</title>
        <script>
            window.onload=function(){
                var oTab=document.getElementById(‘tab1‘);
                var oBtn=document.getElementById(‘btn1‘);
                
                oBtn.onclick=function(){
                    var arr=[];
                    for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                        arr[i]=oTab.tBodies[0].rows[i];                    
                    }
                    arr.sort(function(tr1,tr2){
                    //tr1中的第一个单元格转化为数比较
                    var n1=parseInt(tr1.cells[0].innerHTML);
                    var n2=parseInt(tr2.cells[0].innerHTML);    
                    return n1-n2;
                    });
                    //tr重新插入
                    for(var i=0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);    
                    };
                };
            }
        </script>
    </head>

    <body>
       <input id="btn1"  type="button" value="排序"/>
       <table id="tab1" border="1" width="500">
           <thead>
               <td>ID</td>
               <td>姓名</td>
               <td>年龄</td>
               
           </thead>
           <tbody>
               <tr>
                   <td>1</td>
                   <td>张三</td>
                   <td></td>                
               </tr>
                   <tr>
                   <td>2</td>
                   <td>李四</td>
                   <td></td>                
               </tr>
                   <tr>
                   <td>3</td>
                   <td>王五</td>
                   <td></td>                
               </tr>
                <tr>
                   <td>5</td>
                   <td>王五</td>
                   <td></td>                
               </tr>
                 <tr>
                   <td>4</td>
                   <td>钱六</td>
                   <td></td>                
               </tr>
           </tbody>
       </table>
       
    </body>

</html>

表格排序

标签:

原文地址:http://www.cnblogs.com/zhouyx/p/4674149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!