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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
AngularJS表单验证功能分析
May 26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
js实现文字头像的生成代码
Mar 07 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中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python实现视频分帧效果
2019/05/31 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
方正Java笔试题
2014/07/03 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
单位绩效考核方案
2014/05/11 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
搭建Yolov5服务器
2022/04/30 Servers