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

 姓名   　　力量   敏捷   智力

 德鲁伊王    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. codevs 3095 黑心的市长

    3095 黑心的市长  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond   题目描述 Description A市有一条长Nkm的高速公路.有M个人各自想承包 ...

  2. Cobbler安装配置简单使用

    安装Cobbler [root@linux-node3 ~]# yum -y install epel-release [root@linux-node3 ~]# yum -y install cob ...

  3. 机器学习之K-means算法

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 简介 在之前发表的线性回归.逻辑回归.神经网络.SVM支持向量机等算法都是监督学习算法,需要样本进行训练,且 样本的类别是知 ...

  4. Can you answer these queries II

    题意: 给一长度为n的序列,有m组询问,每一组询问给出[l,r]询问区间内的最大去重连续子段和. 解法: 考虑一下简化后的问题:如果题目要求询问查询以$r$为右端点且$l$大于等于给定值的去重连续子段 ...

  5. 【eclipse插件开发实战】Eclipse插件开发2——SWT

    Eclipse插件开发实战2--SWT 一.SWT简介 SWT(StandardWidget Toolkit) 标准小窗口工具箱,一开源的GUI编程框架,与AWT/Swing有相似的用处,eclips ...

  6. java.endorsed.dirs

    java.ext.dirs 用于扩展jdk的系统库,那么 -Djava.endorsed.dirs 又有什么神奇的作用呢? java提供了endorsed技术: 关于endorsed:可以的简单理解为 ...

  7. QDUOJ LC的课后辅导 单调递增栈

    LC的课后辅导 发布时间: 2015年9月19日 21:42   时间限制: 1000ms   内存限制: 256M 描述 有一天,LC给我们出了一道题,如图: 这个图形从左到右由若干个 宽为1 高不 ...

  8. 学习RadonDB源码（二）

    1. 为我新的一天没有放弃而喝彩 学习是一件很容易放弃的事情,因为就算是不学,我也能在现在的岗位上发光发热.可是人不就是一个热爱折腾的种群吗? 今天没有放弃不代表明天没有放弃,也许放弃的可能性大于坚持 ...

  9. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient：4.1 上报位置信息

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  10. Source Insight 入门设置

    在添加工程时,如果想添加文件夹下所有的文件,应该选择 “add tree” Source Insight 类名显示乱码解决 最近重新安装里source insight,但是打开文件后,类名显示乱码? ...