根据表格中的某一列进行排序的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 相关文章推荐
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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读取文件并可支持远程文件的代码分享
2012/10/03 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python生成随机图形验证码详解
2017/11/08 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python request使用方法及问题总结
2020/04/26 Python
Python try except else使用详解
2021/01/12 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
生产管理的三大手法
2013/11/11 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
采购部长岗位职责
2014/06/13 职场文书
小学综合实践活动总结
2014/07/07 职场文书
小学生运动会报道稿
2014/09/12 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
离婚协议书范文2015
2015/01/26 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书