zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    《Python核心编程》数字类型
    我的Android进阶之旅------&gt;Android关于Log的一个简单封装
    Flex中TabNavigator隐藏和显示选项卡
    【HDOJ 5654】 xiaoxin and his watermelon candy(离线+树状数组)
    兔子-svnserver,client搭建
    数据库事务的隔离级别简单总结
    Oracle oledb 打包并集成到程序安装包(VC ADO訪问Oracle)
    kafka分区及副本在broker的分配
    每天进步一点点——mysql——Percona XtraBackup(innobackupex)
    CodeForces 550D Regular Bridge(构造)
  • 原文地址:https://www.cnblogs.com/52css/p/2949003.html
Copyright © 2011-2022 走看看