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

 姓名   　　力量   敏捷   智力

 德鲁伊王    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. 【Boost】boost库asio详解3——io_service作为work pool

    无论如何使用,都能感觉到使用boost.asio实现服务器,不仅是一件非常轻松的事,而且代码很漂亮,逻辑也相当清晰,这点上很不同于ACE.使用io_service作为处理工作的work pool,可以 ...

  2. ftp主要流程

    判断是否是root用户,若不是则提示并退出. 建立server socket. 等待用户连接,并建立相应用户的子进程.

  3. Solr查询空值字段

    摘要: Solr的查询一般都是查找满足某个关键词的文档,偶然一个需求是查询Solr中某个字段不为空的数据.查询空值数据字符串类型 可以通过下面这种查询方式找到所有描述description为空的数据. ...

  4. 关于 jwTextFiled 的使用说明

    我在些项目中多次对一些输入框做了相同的代码操作,终于有一天忍不住了,MD必须写一个小的框架解决这个搬砖的问题.经过一天的战斗,于是 jwTextFied 就默默的诞生了. 地址:https://git ...

  5. css3单位em，rem，px，vw，vh等

    昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...

  6. SCUT - 114 - 作业之数学篇 - 杜教筛

    https://scut.online/p/114 \(A(n)=\sum\limits_{i=1}^{n} \frac{lcm(i,n)}{gcd(i,n)}\) \(=\sum\limits_{i ...

  7. 洛谷 - P2278 - 操作系统 - 模拟

    https://www.luogu.org/problemnew/show/P2278 题目没有说同时到达的优先级最大的应该处理谁. 讲道理就是处理优先级最大的. #include<bits/s ...

  8. java 大数详细讲解

    介绍 java中用于操作大叔的类主要有俩种 第一个是BigInteger,代表大整数.第二个是BigDecimal,代表大浮点数.两种类的操作方法类似,所以我们只讲解BigInterger的用法 基本 ...

  9. Android教程

    转载,但请务必在明确位置注明出处! http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ Android Killer ...

  10. POJ3268【最短路】

    题意: n个点m条有向边,每个点有一头牛,每头牛会沿着各自的最短路先到x点,然后又从x点到各自的点,求这些牛中间最短路程最大的牛. 思路: 从x点到各点的最短路不用说了,裸的最短路: 但是从所有点到x ...