<!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. SQL基本语句汇总

    语句:CREATE TABLE 作用:创建表格 格式:CREATE TABLE tableName (columnName1 columnDataType1, columnName2 columnDa ...

  2. 开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

    攒到 250楼再统一发一次代码,各位 给力啊 156楼之前的兄弟 都已经发送代码了!各位查收一下!   156楼之后的兄弟要晚上统一发送 200楼之前的兄弟都已经发送代码了!  各位查收一下!!!顺便 ...

  3. SQL多表合并查询结果

    两表合并查询,并同时展示及分页SELECT a.* FROM ( ( SELECT punycode, `domain`, 'Success' AS state, add_time, AS refun ...

  4. redis配置文件英译汉

    # By default Redis asynchronously dumps the dataset on disk. This mode is # good enough in many appl ...

  5. ratina 视网膜屏幕解决方案大全

    第三方教程 http://www.tuicool.com/articles/JBreIn 知乎 https://www.zhihu.com/question/21653056 强烈推荐!!!最牛逼最专 ...

  6. 不需要sql进行计算数据的平均值、最大值、最小值、和

    介绍下SqlServer.前端js.后台C#三个阶段对均值.最大值.最小值.和计算int[] jisuan = {0, 1, 3, 5, 7,8 }; List<int> jisuan2 ...

  7. 初识 Html5

    1.1认识HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...

  8. Surface Shader简单向导

    Surface Shader 表面着色器 描述 当你的Material要处理光照,则一般使用Surface Shader.Surface Shader隐藏了光照的计算,你只需要在surf函数里设置好反 ...

  9. myeclipse中导入js报如下错误Syntax error on token "Invalid Regular Expression Options", no accurate correc

    今天在使用bootstrap的时候引入的js文件出现错误Syntax error on token "Invalid Regular Expression Options", no ...

  10. The Myths about Transactions (ACID) and NoSQL

    There has been widespread characterization of one of the major distinctions between NoSQL and tradit ...