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程序设计有所帮助。

相关文章

  • ECMAScript 数据类型之Number类型

    ECMAScript 数据类型之Number类型

    这篇文章主要介绍了 ECMAScript 数据类型之Number类型,Number类型使用IEEE 754格式表示整数和浮点值,更多相关内容请需要的小伙伴参考下面文章内容
    2022-06-06
  • js实现多选项切换导航菜单的方法

    js实现多选项切换导航菜单的方法

    这篇文章主要介绍了js实现多选项切换导航菜单的方法,可实现动态生成多选项切换导航菜单的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-02-02
  • JavaScript 事件记录使用说明

    JavaScript 事件记录使用说明

    JavaScript 事件记录使用说明需要的朋友可以参考下。
    2009-10-10
  • 说明你的Javascript技术很烂的五个原因

    说明你的Javascript技术很烂的五个原因

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。
    2011-04-04
  • 微信小程序实现动态渲染Markdown示例详解

    微信小程序实现动态渲染Markdown示例详解

    这篇文章主要为大家介绍了微信小程序实现动态渲染Markdown示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Javascript String 字符串操作包

    Javascript String 字符串操作包

    提供一个 JS String 包,包含了一些常用的对字符串操作的函数,详细的请看源码及演示
    2010-10-10
  • JavaScript JSON.stringify()的使用总结

    JavaScript JSON.stringify()的使用总结

    JSON是一种轻量级数据格式,可以方便地表示复杂数据结构。JSON对象有两个方法:stringify()和parse()。在简单的情况下,这两个方法分别可以将JavaScript序列化为JSON字符串,以及将JSON解析为原生JavaScript值。本文着重介绍JSON.stringify()的使用方法和注意事项。
    2021-05-05
  • javascript异步编程

    javascript异步编程

    如果编程加入了时间的概念就一切变得非常复杂。通常我们的程序是飞快地解析执行,一毫秒紧接着一毫秒,从上至下地执行,这称之为同步。但如果我们想让后台的程序不等前面的程序执行,就执行呢,于是就有了异步的概念。
    2010-06-06
  • javascript 高级语法之继承的基本使用方法示例

    javascript 高级语法之继承的基本使用方法示例

    这篇文章主要介绍了javascript 高级语法之继承的基本使用方法,结合实例形式分析了JavaScript继承的基本使用方法与操作注意事项,需要的朋友可以参考下
    2019-11-11
  • 摘自启点的main.js

    摘自启点的main.js

    来自启点的js,主要包括字符串的trim,cookies设置等
    2008-04-04

最新评论