• JS表格排序


    appendChild:1、先把元素从原有的父级上删掉。2、添加到新的父级。

    排序的原理:从一堆数里找出一个最小的数用appendChild插入到最后,再在剩下的数里找最小的数用appendChild插入到最后,如此重复就能找把所有的数实现排序。

    表格排序思路:

    1、获取元素。

    2、创建一个空数组 var arr=[];

    3、用for循环把表格的每行数赋值给数组 arr[i]=oTable.tBodies[0].rows[i];

    4、用sort()把数组里面的元素进行排序。

    5、用for循环把数组里排好序的数用appendChild插入到tBodies。

    完整代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>排序</title>
     6 <script>
     7 window.onload=function()
     8 {
     9     var oBtn=document.getElementById('btn');
    10     var oTable=document.getElementById('table');
    11     
    12     oBtn.onclick=function()
    13     {
    14         var arr=[];
    15         for(var i=0;i<oTable.tBodies[0].rows.length;i++)
    16         {
    17             arr[i]=oTable.tBodies[0].rows[i];
    18         };
    19         
    20         arr.sort(function(tr1,tr2){
    21             n1=parseInt(tr1.cells[0].innerHTML);
    22             n2=parseInt(tr2.cells[0].innerHTML);
    23             return n1-n2;
    24         });    
    25         
    26         for(var i=0;i<arr.length;i++)
    27         {
    28             oTable.tBodies[0].appendChild(arr[i]);
    29         };
    30     };
    31 };
    32 </script>
    33 </head>
    34 
    35 <body>
    36 <input type="button" value="排序" id="btn" />
    37 <table id="table" border="1" width="100%" cellpadding="0" cellspacing="0">
    38     <thead>
    39         <tr>
    40             <th>ID</th>
    41             <th>姓名</th>
    42             <th>专业</th>
    43         </tr>
    44     </thead>
    45     <tbody>
    46         <tr>
    47             <td>58</td>
    48             <td>Simon</td>
    49             <td>网站设计</td>
    50         </tr>
    51         <tr>
    52             <td>20</td>
    53             <td>Melon</td>
    54             <td>网站设计</td>
    55         </tr>
    56         <tr>
    57             <td>98</td>
    58             <td>张三</td>
    59             <td>物流</td>
    60         </tr>
    61         <tr>
    62             <td>87</td>
    63             <td>李四三</td>
    64             <td>物流</td>
    65         </tr>
    66         <tr>
    67             <td>798</td>
    68             <td>张三</td>
    69             <td>物流</td>
    70         </tr>
    71     </tbody>
    72 </table>
    73 </body>
    74 </html>
  • 相关阅读:
    八数码难题 (codevs 1225)题解
    小木棍 (codevs 3498)题解
    sliding windows (poj 2823) 题解
    集合删数 (vijos 1545) 题解
    合并果子 (codevs 1063) 题解
    等价表达式 (codevs 1107)题解
    生理周期 (poj 1006) 题解
    区间 (vijos 1439) 题解
    区间覆盖问题 题解
    种树 (codevs 1653) 题解
  • 原文地址:https://www.cnblogs.com/52css/p/2949003.html
Copyright © 2020-2023  润新知