<!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. java发送邮件..转

    使用Java应用程序发送E-mail十分简单,但是首先你应该在你的机器上安装JavaMail API 和Java Activation Framework (JAF) . 你可以在 JavaMail ...

  2. Java json串生成及转bean

      package com; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import j ...

  3. ZK 样式使用

    控件: <textbox id="usernameTb" sclass="login-user-input" placeholder="账号&q ...

  4. 太极旋转-JS实现

    刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...

  5. 深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  6. content内网，会显示内容，没有内容可地址存在就是这个情况

    漏洞地址:http://note.youdao.com/memory/?url=http://www.wooyun.org(如需登录,请注册登录) 正文预览的地方会读取URL地址的<meta n ...

  7. Oracle EBS - Form DEV Env

    1. 创建文件夹resource与forms, 以便存放pll与forms(主要用到APSTAND.fmb, APPSTAND.fmb, TEMPLATE.fmb)文件; 2. 修改注册表 HKEY_ ...

  8. Hbuilder开发HTML5 APP之向导页制作

    研究了下,向导页的制作还是比较简单的,主要使用的是mui控件中的”图片轮播“组件,组件的标签写法手册中有,中间发现个有趣的东西,如果要作全屏,可以加个样式mui-fullscreen 滑动图片时会自动 ...

  9. IOS第三天-新浪微博 - 版本新特性，OAuth授权认证

    *********版本新特性 #import "HWNewfeatureViewController.h" #import "HWTabBarViewController ...

  10. Powershell 十个常见任务

    学习Powershell的时候,基本的语法也了解了一些,但是就是不知道要写些什么?作为一个过来者,和大家一起分享下常见的几个管理任务脚本. 1.更改本地Administrator账号密码 [ADSI] ...