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 Error的方法
Mar 25 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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
基于mysql的论坛(5)
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
简单了解Django ContentType内置组件
2019/07/23 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
初中毕业生感言
2015/07/31 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python