<!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. homework-02

    关于输入 先来说说关于输入的事情.其实我最一开始并没有发现输入数字之间是用逗号隔开的,所以我是当做空格隔开来写的,后来发现以后匆忙改正,利用strtok与atoi函数从字符串中提取出用逗号隔开的数字. ...

  2. 利用canvas图片剪切

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  3. JAVA 笔试笔记

    1.java优缺点 优点 :纯面对对象,跨平台,提供很多内置的类库,支持web开发,有较好的健壮性和安全性缺点 : 速度慢,跨平台不能像其他的语言一样接近操作系统,复杂 2.java与c/c++ 都是 ...

  4. XML数据的解析

    XML数据的解析 相比于JSON数据解析而言,XML数据解析可能会让更多的童鞋感觉到吃力,对我来说,同样认为JSON数据好像让人感觉比较友好,不过对于程序开发者来说,无非就是这两种数据解析占比较大的部 ...

  5. 已经过事务处理的 MSMQ 绑定(转载)

    https://msdn.microsoft.com/zh-cn/biztalk/ms751493 本示例演示如何使用消息队列 (MSMQ) 执行已经过事务处理的排队通信. 注意 本主题的末尾介绍了此 ...

  6. 在Visual Studio中将现有.NET Framework项目迁移至.NET Core 1.1 Preview 1

    1)下载安装包含 .NET Core 1.1 Preview 1 的 SDK:Windows x64 安装包(下载地址列表) 2)下载最新 VS 2015 NuGet 插件:https://dist. ...

  7. 玩转JavaScript OOP[1]——复杂类型

    概述 在JavaScript中,我们可以使用函数.数组.对象,以及日期.正则等一些内置类型的实例,它们都是复杂类型的表现.从本质上讲,这些复杂类型都是Object类型.本篇将主要介绍三种Object类 ...

  8. OOAD利器之UML基础

    UML:Unified Modeling Language,即统一建模语言,简单地说就是一种有特殊用处的语言.本文是我初步学习UML的学习笔记,对于我们菜鸟码农来说,让我们做设计的可能性不大,但至少能 ...

  9. Unity3D游戏开发初探—2.初步了解3D模型基础

    一.什么是3D模型? 1.1 3D模型概述 简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被. ...

  10. C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字

    C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字 上一篇实现了把文字绘制到OpenGL窗口,但实质上只是把含有文字的贴图贴到矩形模型上.本篇我们介绍用Poi ...