1.  题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
  2.  姓名   　　力量   敏捷   智力
  3.  德鲁伊王    17    24    13
  4.  月之骑士    15    22    16
  5.  众神之王    19    15    20
  6.  流浪剑客    23    15    14
  7.  基本思路：
  8.  点击将各列数值存入数组第一次点击?(className=="as"?)升序排序(className="desc")按新排列的数组的顺序，将各列赋予新值降序排序(className="as")yesno
  9.  完整代码：
  10.  
  11.   <!DOCTYPE HTML>
  12.  <html>
  13.      <head>
  14.      <meta charset="utf-8">
  15.      </head>
  16.      <body>
  17.          <table>
  18.              <tr>
  19.                  <th>姓名</th>
  20.                  <th id="th1" onclick="SortTable(this)" class="as">力量</th>
  21.                  <th id="th2" onclick="SortTable(this)" class="as">敏捷</th>
  22.                  <th id="th3" onclick="SortTable(this)" class="as">智力</th>
  23.              </tr>
  24.              <tr>
  25.                  <td name="td0">德鲁伊</td>
  26.                  <td name="td1">17</td>
  27.                  <td name="td2">24</td>
  28.                  <td name="td3">13</td>
  29.              </tr>
  30.              <tr>
  31.                  <td name="td0">月之骑士</td>
  32.                  <td name="td1">15</td>
  33.                  <td name="td2">22</td>
  34.                  <td name="td3">16</td>
  35.              </tr>
  36.              <tr>
  37.                  <td name="td0">众神之王</td>
  38.                  <td name="td1">19</td>
  39.                  <td name="td2">15</td>
  40.                  <td name="td3">20</td>
  41.              </tr>
  42.              <tr>
  43.                  <td name="td0">流浪剑客</td>
  44.                  <td name="td1">23</td>
  45.                  <td name="td2">15</td>
  46.                  <td name="td3">14</td>
  47.              </tr>
  48.          </table>
  49.      </body>
  50.  </html>
  51.  <script type="text/javascript">
  52.      var tag=1;
  53.      function sortNumberAS(a, b)
  54.      {
  55.          return a - b
  56.      }
  57.      function sortNumberDesc(a, b)
  58.      {
  59.          return b-a
  60.      }
  61.  
  62.      function SortTable(obj){
  63.          var td0s=document.getElementsByName("td0");
  64.          var td1s=document.getElementsByName("td1");
  65.          var td2s=document.getElementsByName("td2");
  66.          var td3s=document.getElementsByName("td3");
  67.          var tdArray0=[];
  68.          var tdArray1=[];
  69.          var tdArray2=[];
  70.          var tdArray3=[];
  71.          for(var i=0;i<td0s.length;i++){
  72.              tdArray0.push(td0s[i].innerHTML);
  73.          }
  74.          for(var i=0;i<td1s.length;i++){
  75.              tdArray1.push(parseInt(td1s[i].innerHTML));
  76.          }
  77.          for(var i=0;i<td2s.length;i++){
  78.              tdArray2.push(parseInt(td2s[i].innerHTML));
  79.          }
  80.          for(var i=0;i<td3s.length;i++){
  81.              tdArray3.push(parseInt(td3s[i].innerHTML));
  82.          }
  83.          var tds=document.getElementsByName("td"+obj.id.substr(2,1));
  84.          var columnArray=[];
  85.          for(var i=0;i<tds.length;i++){
  86.              columnArray.push(parseInt(tds[i].innerHTML));
  87.          }
  88.          var orginArray=[];
  89.          for(var i=0;i<columnArray.length;i++){
  90.              orginArray.push(columnArray[i]);
  91.          }
  92.          if(obj.className=="as"){
  93.              columnArray.sort(sortNumberAS);               //排序后的新值
  94.              obj.className="desc";
  95.          }else{
  96.              columnArray.sort(sortNumberDesc);               //排序后的新值
  97.              obj.className="as";
  98.          }
  99.  
  100.          for(var i=0;i<columnArray.length;i++){
  101.              for(var j=0;j<orginArray.length;j++){
  102.                  if(orginArray[j]==columnArray[i]){
  103.                      document.getElementsByName("td0")[i].innerHTML=tdArray0[j];
  104.                      document.getElementsByName("td1")[i].innerHTML=tdArray1[j];
  105.                      document.getElementsByName("td2")[i].innerHTML=tdArray2[j];
  106.                      document.getElementsByName("td3")[i].innerHTML=tdArray3[j];
  107.                      orginArray[j]=null;
  108.                      break;
  109.                  }
  110.              }
  111.          }
  112.      }
  113.  </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. poj1236学校网络——连通块

    题目:http://poj.org/problem?id=1236 通过传输文件的特点可以看出要先求强联通分量,缩点: 问题1:即缩点后入度为0的点,从它们开始传文件可以传给所有学校: 问题2:对于所 ...

  2. linux学习 三 redhat

    1: 查看redhat版本号. 2:   防火墙中加入8080 查看防火墙状态,root用户登录,执行命令systemctl status firewalld 开启防火墙:systemctl star ...

  3. mfc画波形函数

    void CMyPicoTestDlg::DrawWave(CDC *pDC,CRect &rectPicture) { float fDeltaX; float fDeltaY; int n ...

  4. B - Sea and Islands

    Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description A map ...

  5. 【Linux学习】Linux文件系统1--文件系统的目录结构

    Linux文件系统1--文件系统的目录结构 一.linux文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 1.普通文件:如文本文件. ...

  6. easyui datagrid 列对不齐

    function initBIRDataGrid(id,cols){ $('#basicTable').datagrid({ //列表区域 pageList: [5, 10, 15], fit:tru ...

  7. 也谈Flash mmorpg地图问题【转】

    网上看一篇关于目前几个流行flash mmorpg地图实现的分析,这里也想说说自己的一些看法. 常见的三种方式:1.整图2.Tile元素拼装3.栅格化切片 整图 整图加载很好理解直接加载一张背景图.这 ...

  8. C#backgroundWorker用法

    1.在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面停止响应.解决的方法就是新开一个线程,把耗时的操作放到线程中执行,这样就可以在用户界面上进行其它操作. ...

  9. 洛谷 - P1829 - Crash的数字表格 - 莫比乌斯反演

    求: \(S(n,m)=\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m}lcm(i,j)\) 显然: \(S(n,m)=\sum\limits_{i=1}^{n}\ ...

  10. UTF-8和Unicode互转

    1.Unicode转UTF-8 void CodeCovertTool::UNICODE_to_UTF8(const CString& unicodeString, std::string&a ...