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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
tensorflow识别自己手写数字
2018/03/14 Python
python中的colorlog库使用详解
2019/07/05 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
采购部部长岗位职责
2014/02/06 职场文书
盲山观后感
2015/06/11 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
员工给公司的建议书
2019/06/24 职场文书
python实现图片批量压缩
2021/04/24 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
分享python函数常见关键字
2022/04/26 Python