javascript实现Table排序的方法


Posted in Javascript onMay 15, 2015

本文实例讲述了javascript实现Table排序的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格排序</title>
<style type="text/css">
body
{
 margin:0;
 padding:0;
 font-size:14px;
}    
table,td,th
{
 border:1px solid red;      
}
th
{
 width:100px;
 background:pink;
}
table
{
 margin:0 auto;
}  
a
{
 text-decoration:none;
}  
</style>
<script type="text/javascript">
function sortAge() {
 //获得表格对象
 var tblObj = document.getElementById("tblData");
 //把行节点集合存放到临时数组中,
 //注意这里存放的是表格行节点对象集合的引用
 //后续把排序后的数据添加回表格时,不需要删除行节点。
 var rowNodes = tblObj.rows;
 var arrTemp = new Array();
 for (var i = 1; i < rowNodes.length; i++) {
  arrTemp[i - 1] = rowNodes[i];
 }
 var sortFlag = tblObj.rows[0].cells[1].innerText;
 sortFlag = sortFlag.charAt(sortFlag.length - 1);
 //取最后一个字符(↑表示升序,↓表示降序)
 if (sortFlag == "↑") {
  tblObj.rows[0].cells[1].innerHTML = "<a href='javascript:void(0)' onclick='sortAge()'>年龄↓</a>";
  for (var i = 0; i < arrTemp.length; i++) {
   for (var j = i + 1; j < arrTemp.length; j++) {
    if (parseInt(arrTemp[j].cells[1].innerText) < parseInt(arrTemp[i].cells[1].innerText)) {
     var temp = arrTemp[i];
     arrTemp[i] = arrTemp[j];
     arrTemp[j] = temp;
    }
   }
  }
 }
 else {
  tblObj.rows[0].cells[1].innerHTML = "<a href='javascript:void(0)' onclick='sortAge()'>年龄↑</a>";
  for (var i = 0; i < arrTemp.length; i++) {
   for (var j = i + 1; j < arrTemp.length; j++) {
    if (parseInt(arrTemp[j].cells[1].innerText) > parseInt(arrTemp[i].cells[1].innerText)) {
     var temp = arrTemp[i];
     arrTemp[i] = arrTemp[j];
     arrTemp[j] = temp;
    }
   }
  }
 }
 //把排序后的数据添加回表格,
 //注意由于存放的是引用,所以不需要删除原来的行
 var TBodyObj = tblObj.childNodes[0];
 for (var i = 0; i < arrTemp.length; i++) {
  TBodyObj.appendChild(arrTemp[i]);
 }
}
</script>
</head>
<body>
<table id="tblData" cellspacing="0px" cellpadding="5px">
  <tr>
    <th>姓名</th>
    <th><a href="javascript:void(0)" onclick="sortAge()">年龄↑</a></th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>南昌</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>21</td>
    <td>郑州</td>
  </tr>
  <tr>
    <td>李莫</td>
    <td>35</td>
    <td>天津</td>
  </tr>
  <tr>
    <td>肖丽</td>
    <td>19</td>
    <td>深圳</td>
  </tr>
  <tr>
    <td>罗成</td>
    <td>23</td>
    <td>上海</td>
  </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
Javascript节点关系实例分析
May 15 #Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
You might like
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python函数和模块的使用总结
2019/05/20 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
劳动实践课感言
2014/02/01 职场文书
市场营销工作计划书
2014/05/06 职场文书
县委务虚会发言材料
2014/10/20 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android