JS实现简单表格排序操作示例


Posted in Javascript onOctober 07, 2017

本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考,具体如下:

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html" charset="utf-8">
  <title>sort table</title>
  <style>
    *{
      margin:0px;
      padding:0px;
    }
    body{
      background:#ccc;
    }
    table{
      width:350px;
      margin:0 auto;
      background-color:#eee;
    }
    table th{
      cursor:hand;
      padding:5px 0;
      background-color:#999;
    }
    table td{
      background-color:#fff;
      font-size:16px;
      font-weight:normal;
      text-align:center;
      line-height:30px;
    }
  </style>
  <script language="javascript">
    function sortCells(type){
      var tbs=document.getElementsByTagName("table")[0];
      var arr=[];
      var arr2=[];
      for(var i=1;i<tbs.rows.length;i++){
        var text=tbs.rows[i].cells[type].innerText;
        arr.push(text);
        arr2[text]=i;
      }
      if(type==0){
        arr.sort(function(a,b){return a-b});
      }else{
        arr.sort();
      }
      var temp="";
      for(var j=1;j<tbs.rows.length;j++){
        temp=tbs.rows[j].cells[0].innerText;
        tbs.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[0].innerText=temp;
        temp=tbs.rows[j].cells[1].innerText;
        tbs.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[1].innerText=temp;
        temp=tbs.rows[j].cells[2].innerText;
        tbs.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[2].innerText=temp;
//        console.log(arr2);
        for(var i=1;i<tbs.rows.length;i++){
          var text=tbs.rows[i].cells[type].innerText;
          arr2[text]=i;
        }
      }
    }
  </script>
</head>
<body>
<center>sort table</center>
<table border="0">
  <tr>
    <th onclick="sortCells(0);">序号</th>
    <th onclick="sortCells(1);">姓名</th>
    <th onclick="sortCells(2);">日期</th>
  </tr>
  <tr>
    <td>2</td>
    <td>BB</td>
    <td>2015-09-12</td>
  </tr>
   <tr>
    <td>3</td>
    <td>CC</td>
    <td>2015-07-12</td>
  </tr>
   <tr>
    <td>1</td>
    <td>AA</td>
    <td>2015-09-11</td>
  </tr>
   <tr>
    <td>4</td>
    <td>DD</td>
    <td>2015-06-12</td>
  </tr>
</table>
</body>
</html>

运行效果:

JS实现简单表格排序操作示例

JS实现简单表格排序操作示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 #Javascript
node.js中http模块和url模块的简单介绍
Oct 06 #Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 #Javascript
vue-cli构建项目使用 less的方法
Oct 04 #Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 #Javascript
浅谈angular2路由预加载策略
Oct 04 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python 判断奇数偶数的方法
2018/12/20 Python
python+pyqt5编写md5生成器
2019/03/18 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
高中地理教学反思
2014/01/29 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
活动新闻稿范文
2015/07/17 职场文书
高一军训口号
2015/12/25 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python