题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

 姓名   　　力量   敏捷   智力

 德鲁伊王    17    24    13

 月之骑士    15    22    16

 众神之王    19    15    20

 流浪剑客    23    15    14

 基本思路：

 点击将各列数值存入数组第一次点击?(className=="as"?)升序排序(className="desc")按新排列的数组的顺序，将各列赋予新值降序排序(className="as")yesno

 完整代码：

  <!DOCTYPE HTML>

 <html>

     <head>

     <meta charset="utf-8">

     </head>

     <body>

         <table>

             <tr>

                 <th>姓名</th>

                 <th id="th1" onclick="SortTable(this)" class="as">力量</th>

                 <th id="th2" onclick="SortTable(this)" class="as">敏捷</th>

                 <th id="th3" onclick="SortTable(this)" class="as">智力</th>

             </tr>

             <tr>

                 <td name="td0">德鲁伊</td>

                 <td name="td1">17</td>

                 <td name="td2">24</td>

                 <td name="td3">13</td>

             </tr>

             <tr>

                 <td name="td0">月之骑士</td>

                 <td name="td1">15</td>

                 <td name="td2">22</td>

                 <td name="td3">16</td>

             </tr>

             <tr>

                 <td name="td0">众神之王</td>

                 <td name="td1">19</td>

                 <td name="td2">15</td>

                 <td name="td3">20</td>

             </tr>

             <tr>

                 <td name="td0">流浪剑客</td>

                 <td name="td1">23</td>

                 <td name="td2">15</td>

                 <td name="td3">14</td>

             </tr>

         </table>

     </body>

 </html>

 <script type="text/javascript">

     var tag=1;

     function sortNumberAS(a, b)

     {

         return a - b

     }

     function sortNumberDesc(a, b)

     {

         return b-a

     }

     function SortTable(obj){

         var td0s=document.getElementsByName("td0");

         var td1s=document.getElementsByName("td1");

         var td2s=document.getElementsByName("td2");

         var td3s=document.getElementsByName("td3");

         var tdArray0=[];

         var tdArray1=[];

         var tdArray2=[];

         var tdArray3=[];

         for(var i=0;i<td0s.length;i++){

             tdArray0.push(td0s[i].innerHTML);

         }

         for(var i=0;i<td1s.length;i++){

             tdArray1.push(parseInt(td1s[i].innerHTML));

         }

         for(var i=0;i<td2s.length;i++){

             tdArray2.push(parseInt(td2s[i].innerHTML));

         }

         for(var i=0;i<td3s.length;i++){

             tdArray3.push(parseInt(td3s[i].innerHTML));

         }

         var tds=document.getElementsByName("td"+obj.id.substr(2,1));

         var columnArray=[];

         for(var i=0;i<tds.length;i++){

             columnArray.push(parseInt(tds[i].innerHTML));

         }

         var orginArray=[];

         for(var i=0;i<columnArray.length;i++){

             orginArray.push(columnArray[i]);

         }

         if(obj.className=="as"){

             columnArray.sort(sortNumberAS);               //排序后的新值

             obj.className="desc";

         }else{

             columnArray.sort(sortNumberDesc);               //排序后的新值

             obj.className="as";

         }

         for(var i=0;i<columnArray.length;i++){

             for(var j=0;j<orginArray.length;j++){

                 if(orginArray[j]==columnArray[i]){

                     document.getElementsByName("td0")[i].innerHTML=tdArray0[j];

                     document.getElementsByName("td1")[i].innerHTML=tdArray1[j];

                     document.getElementsByName("td2")[i].innerHTML=tdArray2[j];

                     document.getElementsByName("td3")[i].innerHTML=tdArray3[j];

                     orginArray[j]=null;

                     break;

                 }

             }

         }

     }

 </script>

HTML中实现Table表头点击升序/降序排序的更多相关文章

  1. 【java】实体类中 按照特定的字段 进行升序/降序 排序

    背景: 实际页面上  所有的分值都是按照JSON格式存储在一个字符串中 存储在同一个字段中: {"ownPTotal":"10>0","ownO ...

  2. mysql字段有中英文，数字按照升序/降序 排序

    ORDER BY    CONVERT(name,SIGNED) ASC,    CONVERT(name USING gbk) DESC

  3. 010.Oracle数据库 , ORDER BY 按升序降序排序

    /*Oracle数据库查询日期在两者之间*/ SELECT DISTINCT ATA FROM LM_FAULT WHERE ( OCCUR_DATE BETWEEN to_date( '2017-0 ...

  4. DataGridView使用技巧十三：点击列头实现升序和降序排序

    DataGridView 列有三种排序模式.每一列的排序模式是通过该列的 SortMode 属性指定的,该属性可以设置为以下的 DataGridViewColumnSortMode 枚举值之一. Da ...

  5. 集合（一）-Java中Arrays.sort()自定义数组的升序和降序排序

    默认升序 package peng; import java.util.Arrays;  public class Testexample { public static void main(Stri ...

  6. LINQ中的OrderBy实现按照两个字段升序、降序排序操作

    在公司或许有这种需求,先根据第一个某个字段按照升序排序,然后如果相同,在按照第二个某个字降序排序,我们该怎么去实现呢? 现在来教教大家分别使用Labmda和LINQ进行这种操作. 1.先按照第一个字段 ...

  7. js学习篇--数组按升序降序排列

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 通过orderby关键字，LINQ可以实现升序和降序排序。LINQ还支持次要排序。

    通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...

  9. TreeMap升序|降序排列和按照value进行排序

    TreeMap 升序|降序排列 import java.util.Comparator; import java.util.TreeMap; public class Main { public st ...

随机推荐

  1. 一：MetaMq集群中单个节点的安装配置示意图

    MetaMQ集群一个节点的安装和配置示意图[1]:下载metaMQ的安装包

  2. 【USACO】Dining

    [题目链接] [JZXX]点击打开链接 [caioj]点击打开链接 [算法] 拆点+网络流 [代码] #include<bits/stdc++.h> using namespace std ...

  3. AutoIt：AutoIt比我想象的更加强大

    前段时间,我一直认为,通过AutoIt进行自动化操作,也只有几个方法可以用,它们只是controlClick, controlsend等如下图: 我一直认为,AutoIt的所有的GUI 方法,都是用来 ...

  4. hdu5530

    分治ntt 考虑从添加i,放在j位置,那么1->j是一个连通块,j+1->i和1->j不连通,那么我们可以列出式子dp[i]=∑j=1->i dp[i-j]*A(i-1,j-1 ...

  5. jquery easyui 实战总结

    (2012-09-26 10:22:24) 转载▼ 标签: it 分类: Javascript 一.tree 1.根据node id查找对应的node,然后选择该节点:                 ...

  6. ASP.NET Core会议管理平台实战_2、基本概念的理解

    id Token携带用户的信息 AccessToken:是否有权限访问资源 看数据库的表,Client相关的表,api的相关的表 Resources把用户的简介抽象出来到IdentityClaims表 ...

  7. 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之三 —— 配置

    ==== 目录 ==== 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之一 —— 开篇 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之二 —— ...

  8. E20180605-hm

    arbitrary adj. 乱; 随意的,任性的,随心所欲的; 主观的,武断的; 霸道的,专制的,专横的,独断独行的; session n. 开会,会议; (法庭的) 开庭; 会期,学期; (进行某 ...

  9. NITACMOJ144稳定串

    点我>>题目链接 稳定串 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java ...

  10. Codeforces691A【读题-水】

    妈蛋wa了两次.. 时尚的定义是length大于1的要破个洞,一定要破个洞.. According to rules of the Berland fashion, a jacket should b ...