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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
详谈javascript异步编程
Feb 21 Javascript
简单实现js倒计时功能
Feb 13 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
详解redux异步操作实践
Aug 15 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
PHP MVC框架路由学习笔记
2016/03/02 PHP
php实现文件预览功能
2017/05/23 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
深入了解js原型模式
2019/05/30 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Python制作词云的方法
2018/01/03 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
高中生自我评价个人范文
2013/11/09 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
亲子拓展活动方案
2014/02/20 职场文书
吨的认识教学反思
2014/04/27 职场文书
信息管理专业自荐书
2014/06/05 职场文书
航空学院求职信
2014/06/11 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书