<!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. AmazeUI 框架知识点－元素

    1.按钮  .am-btn 圆角按钮 .am-radius 椭圆形按钮 .am-round 按钮激活状态 .am-active 禁用状态 .am-disabled 2.按钮尺寸.am-btn-xl . ...

  2. Tree菜单 复选框选中控制DEMO

    java 对应实体类属定义 public class AccoSysmanResource{        /**     * 资源类型     */    private Integer resou ...

  3. C++中的显式类型转化

    类型转化也许大家并不陌生,int i; float j; j = (float)i; i = (int)j; 像这样的显式转化其实很常见,强制类型转换可能会丢失部分数据,所以如果不加(int)做强制转 ...

  4. C\C++ 生成各位数不相等的随机数

    最近想写一个1A2B的小游戏来练习一下,结果在第一步生成随机数的时候就遇到了一点点问题. 游戏初始化时需要先生成一个四位随机数,且各位各不相等.于是最开始的思路是生成一个整数数组,只需要判断生成的随机 ...

  5. IIS和4.0安装到底有没有先后顺序解答

    在很多人或许很多技术大神都会觉得IIS的安装和4.0没得先后顺序的.其错误弊端在与IIS没有注册到4.0上. 经过今天遇到了服务器安装服务端发觉报错[无法识别的属性“targetFramework”. ...

  6. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  7. NPOI、MyXls、Aspose.Cells 导入导出Excel（转）

    Excel导入及导出问题产生: 从接触.net到现在一直在维护一个DataTable导s出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题: 导出问题: 如果是asp.net,你 ...

  8. Android安全开发之通用签名风险

    Android安全开发之通用签名风险 作者:伊樵.舟海.呆狐@阿里聚安全 1 通用签名风险简介 1.1 Android应用签名机制 阿里聚安全漏洞扫描器有一项检测服务是检测APP的通用签名风险.And ...

  9. ASP.NET安全

    ASP.NET 安全 概述 安全在web领域是一个永远都不会过时的话题,今天我们就来看一看一些在开发ASP.NET MVC应用程序时一些值得我们注意的安全问题.本篇主要包括以下几个内容 : 认证 授权 ...

  10. python自动化测试（4）-使用第三方python库技术实现

    python自动化测试(4)-使用第三方python库技术实现 1   概述 关于测试的方法论,都是建立在之前的文章里面提到的观点: 功能测试不建议做自动化 接口测试性价比最高 接口测试可以做自动化 ...