php使用js对表格进行排序
2015-09-12 15:23
609 查看
<!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预定义常量&变量
- php后管理分类导航菜单
- yii2.0数据库迁移 [多个数据库同时同步数据]
- php---mysql+ajax 无序列表(ul li)分页实现
- php环境安装
- php strcasecmp()与strncasecmp()函数
- 常用的PHPStorm快捷键
- php集成工具之------xampp安装及问题解决
- php getenv()函数
- 在sublime运行php
- php对表格进行批量操作如全选反选删除功能
- phpcms v9附件上传后显示链接名称如何改为附件名称?
- thinkPHP3.2.3使用过程中遇到的问题收集
- php查询数据库输出近7天,每一天的数据
- php广告图片循环播放 幻灯片效果
- MSTP+OSPF+VRRP综合实验指导书
- php文件扩展名判断及获取文件扩展名的N种方法
- 空间索引结构比较RTree R* Tree TPR Tree TPR* Tree
- PHP Global变量定义当前页面的全局变量
- php查找字符是否存在