根据表格中的某一列进行排序的javascript代码


Posted in Javascript onNovember 29, 2013
<script type="text/javascript"> 
var b = true ; 
function sortAge(){ 
var tabNode = document.getElementsByTagName("table")[0]; 
var trNodes = tabNode.rows; //获取表格中的行对象 
var arr = new Array(); 
for(var x=1;x<trNodes.length;x++){ //临时容器存入的是表格中行对象的引用 
arr[x-1] = trNodes[x]; 
} 
sort(arr); 
var tbdNode = tabNode.childNodes[0]; 
if(b){ //if....else...控制按年龄的升降进行排序 
for(var x=0;x<arr.length;x++){ 
tbdNode.appendChild(arr[x]); 
} 
b = false; 
}else{ 
for(var x=arr.length-1;x>=0;x--){ 
tbdNode.appendChild(arr[x]); 
} 
b = true ; 
} 
} 
function sort(arr){ // 排序 
for(var x=0;x<arr.length;x++){ 
for(var y=x+1;y<arr.length;y++){ 
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){ // 不进行parseInt转换是以字符串的ASCII比较 
var temp = arr[x]; 
arr[x] = arr[y]; 
arr[y] = temp; 
} 
} 
} 
} 
</script> <style type="text/css"> 
table{ width:60%; border:solid 1px #0066FF;} 
table td {border:solid 1px #0099ff;} 
a{ text-decoration: none;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>姓名</td><td><a href="javascript:void(0)" onclick="sortAge()">年龄</a></td><td>地址</td> 
</tr> 
<tr> 
<td>张三</td><td>23</td><td>北京</td> 
</tr> 
<tr> 
<td>李四</td><td>25</td><td>上海</td> 
</tr> 
<tr> 
<td>王五</td><td>15</td><td>广州</td> 
</tr> 
<tr> 
<td>唐总</td><td>20</td><td>长沙</td> 
</tr> 
</table> 
</body>
Javascript 相关文章推荐
javascript中[]和{}对象使用介绍
Mar 20 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
JS取文本框中最小值的简单实例
Nov 29 #Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 #Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 #Javascript
JS求平均值的小例子
Nov 29 #Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 #Javascript
JS小功能(button选择颜色)简单实例
Nov 29 #Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 #Javascript
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
浅析php单例模式
2014/11/25 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python3爬虫学习入门教程
2018/12/11 Python
python实现简单加密解密机制
2019/03/19 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python命令 -u参数用法解析
2019/10/24 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
平安家庭事迹材料
2014/12/20 职场文书
2015年女职工工作总结
2015/05/15 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技