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

 更新时间:2017年10月07日 01:34:36   作者:衿华客  
这篇文章主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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>

运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

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

相关文章

  • js获取光标位置的最新方法

    js获取光标位置的最新方法

    这篇文章主要给大家介绍了关于js获取光标位置的最新方法,获取光标位置,最常用的方法就是使用Selection对象和Range对象,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • JavaScript实现分页效果

    JavaScript实现分页效果

    本文主要介绍了JavaScript实现分页效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript常用判断写法大全(推荐)

    JavaScript常用判断写法大全(推荐)

    这篇文章主要介绍了JavaScript常用判断写法(推荐)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JS实现动态给图片添加边框的方法

    JS实现动态给图片添加边框的方法

    这篇文章主要介绍了JS实现动态给图片添加边框的方法,涉及javascript操作图片border的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序登录态和检验注册过没的app.js写法

    微信小程序登录态和检验注册过没的app.js写法

    这篇文章主要介绍了小程序登录态和检验注册过没的app.js写法, 本文通过实例代码给大家介绍的非常详细,具有一定的借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 基于JS实现Flappy Bird游戏的示例代码

    基于JS实现Flappy Bird游戏的示例代码

    Flappy Bird是13年红极一时的小游戏,即摁上键控制鸟的位置穿过管道间的缝隙。本文将用JS实现这一经典的游戏,需要的可以参考一下
    2022-04-04
  • webpack多入口文件页面打包配置详解

    webpack多入口文件页面打包配置详解

    本篇文章主要介绍了webpack多入口文件页面打包配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript实现身份证验证代码

    JavaScript实现身份证验证代码

    本文给大家分享的是使用javascript实现身份验证的规则以及代码,非常的简单实用,有需要的小伙伴可以参考下。
    2016-02-02
  • 原生JS 实现的input输入时表格过滤操作示例

    原生JS 实现的input输入时表格过滤操作示例

    这篇文章主要介绍了原生JS 实现的input输入时表格过滤操作,结合实例形式分析了JavaScript基于页面元素遍历、运算、判断实现的表格过滤相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • text-align:justify实现文本两端对齐 兼容IE

    text-align:justify实现文本两端对齐 兼容IE

    对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间,通过本文介绍text-align:justify实现文本两端对齐 兼容IE
    2015-08-08

最新评论