<!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>

php使用js对表格进行排序的更多相关文章

  1. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  2. JS对表格排序(支持对序号，数字，字母，日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  3. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  4. FineUI第十六天---表格的排序和分页

    表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...

  5. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  6. datagrid-detailview.js easyui表格嵌套

    datagrid-detailview.js easyui表格嵌套

  7. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  8. JS三种简单排序算法

    冒泡排序:最简单.最慢.长度小于7的时候最优 插入排序:比冒泡要快比快速排序和希尔排序慢,数据量小的时候优势大 快速排序:速度很快  //js利用systemSort进行排序 systemSort: ...

  9. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

随机推荐

  1. Spark源码编译并在YARN上运行WordCount实例

    在学习一门新语言时,想必我们都是"Hello World"程序开始,类似地,分布式计算框架的一个典型实例就是WordCount程序,接触过Hadoop的人肯定都知道用MapRedu ...

  2. 将Web应用发布到tomcat中的三种方法

    坑啊,为什么网易的博客不能搬过来!!!我一个一个复制过来容易嘛!!!!原文地址:http://buffalo-l.blog.163.com/blog/static/244954022201539111 ...

  3. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  4. Ubuntu中的快捷键

    Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手. 在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键 功能 T ...

  5. Struts2标签大全

    A:<s:a xhref=""></s:a>-----超链接,类似于html里的<a></a><s:action name=& ...

  6. Jquery源码学习（第一天）

    jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1" ...

  7. 什么情况下才要重写Objective-C中的description方法

    特别注意: 千万不要在description方法中同时使用%@和self,同时使用了%@和self,代表要调用self的description方法,因此最终会导致程序陷入死循环,循环调用descrip ...

  8. 禁用nested loop join里的spool

    禁用nested loop join里的spool 转载自: https://blogs.msdn.microsoft.com/psssql/2015/12/15/spool-operator-and ...

  9. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  10. NodeJS写个爬虫，把文章放到kindle中阅读

    这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...