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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
第六章 php目录与文件操作
2011/12/30 PHP
php获取远程文件大小
2015/10/20 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
vue router demo详解
2017/10/13 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python怎么判断素数
2020/07/01 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
学习党章思想汇报
2014/01/07 职场文书
团日活动总结报告
2014/06/25 职场文书
群教个人对照检查材料
2014/08/20 职场文书
解放思想演讲稿
2014/09/11 职场文书
安全生产学习心得体会
2016/01/18 职场文书