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

 姓名   　　力量   敏捷   智力

 德鲁伊王    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. BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数

    BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数 Description  dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭 ...

  2. Spring 事务管理高级应用难点剖析: 第 3 部分

    本文是“Spring 事务管理高级应用难点剖析” 系列文章的第 3 部分,作者将继续深入剖析在实际 Spring 事务管理应用中容易遇见的一些难点,包括在使用 Spring JDBC 时如果直接获取 ...

  3. JAVA 内部类 （三）实例

    为什么要用内部类:控制框架 一个“应用程序框架”是指一个或一系列类,它们专门设计用来解决特定类型的问题.为应用应用程序框架,我们可从一个或多个类继承,并覆盖其中的部分方法.我们在覆盖方法中编写的代码用 ...

  4. Azure SQL Database (27) 创建Table Partition

    <Windows Azure Platform 系列文章目录> 昨天客户正好提到这个问题,现在记录一下. 我们在使用传统的SQL Server,会使用Table Partition,这个功 ...

  5. Eclipse补全功能

    默认当输入 . 时会弹出提示补全, 如何设置 eclipse 代码自动补全,参考 http://jingyan.baidu.com/article/d45ad148b214a969552b8001.h ...

  6. CodeForces Gym 100685I Innovative Business (贪心)

    题意:给定一条路的长和宽,然后给你瓷砖的长和宽,你只能横着或者竖着铺,也可以切成片,但是每条边只能对应一条边,问你最少要多少瓷砖. 析:先整块整块的放,然后再考虑剩下部分,剩下的再分成3部分,先横着, ...

  7. C#基础：通过委托给任何对象数组进行排序

    在日常编写程序的时候,我们需要对一些对象进行排序,比如对int数组进行排序,自定义类数组进行排序,首先我们先讨论对数组进行排序,我们应该对冒泡排序比较熟悉,下面是数组用冒泡排序的方法 for (int ...

  8. jquery操作select(option)的取值,设置和选中

    比如 <select class="selector"> <option value ="volvo">Volvo</option ...

  9. 制作Docker镜像的两种方式

    此文已由作者朱笑天授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.使用docker commit命令制作docker镜像 1. pull一个centos6.6的基础镜像, ...

  10. E20180512-hm

    travesal n. 横越,横断物,(横向)往返移动;