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

 姓名   　　力量   敏捷   智力

 德鲁伊王    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. windows下的套接字IO模型

    一般情况下,IO操作的行为受两种因素的影响: IO操作对象的类型(阻塞还是非阻塞) 获取IO操作结果的方式(同步还是异步). 同步就是指操作的发起和操作结果的获取由调用者完成. 异步指操作发起由调用方 ...

  2. ubuntu16.04 + CUDA 9.0 + opencv3.3 安装

    安装前的准备 CUDA 9.0 安装,可以参看Ubuntu16.04 + cuda9.0 + cudnn7.1.4 + tensorflow安装 opencv 3.3.0 下载 ippicv_2017 ...

  3. 你忘记的java运算符

    当整数被0除时会得到一个无穷大,或者nan, 所以会抛出数据溢出的异常.

  4. jq之鼠标事件

    以防自己忘记,最重要的是hover效果的 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发 ...

  5. @Conditional注解的作用

    @Conditional是用有条件的加载bean. @Configuration public class TestBeanConfig { // 根据条件创建, 条件写在TestConditiona ...

  6. c++中的友元重载

    1 语法 返回值类型 operator 运算符名称(形参列表) { 重载实体 } --------->operator和运算符名称在一起构造成新的函数名 2 案例 #include <io ...

  7. 【eclipse插件开发实战】 Eclipse插件开发5——时间插件Timer开发实例详解

    Eclipse插件开发5--时间插件Timer开发实例详解 这里做的TimeHelper插件设定为在菜单栏.工具栏提供快捷方式,需要在相应地方设置扩展点,最后弹出窗体显示时间. 在上一篇文章里创建好了 ...

  8. 七大查找算法（Python）

    查找算法 -- 简介 查找(Searching)就是根据给定的某个值,在查找表中确定一个其关键字等于给定值的数据元素.    查找表(Search Table):由同一类型的数据元素构成的集合    ...

  9. Unity3D 图形优化

    Unity3D 图形优化 例如DrawCall,我得到的是一些并不完全正确的信息,例如将N个纹理打包成一个图集,这个图集就只会产生一个DrawCall,如果不打成图集,那么就会有N个DrawCall. ...

  10. 如何使Label有修改功能

    如何使Label有修改功能 之前制作一个项目时需要这样一个功能: 双击Label, 随后Label变为TextBox,用户修改后回车,TextBox变回Label 之前使用WPF做了一个,代码如下: ...