根据表格中的某一列进行排序的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 定义初始化数组函数
Sep 07 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 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下删除字符串中HTML标签的函数
2008/08/27 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
js canvas实现画图、滤镜效果
2018/11/27 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
SQL语言面试题
2013/08/27 面试题
英文简历自荐信范文
2013/12/11 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
走群众路线学习笔记
2014/11/06 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
学风建设主题班会
2015/08/17 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL