根据表格中的某一列进行排序的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 读取xml,写入xml 实现代码
Jul 10 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Jquery api 速查表分享
Jan 12 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
微信小程序实现animation动画
Jan 26 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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 抽象类的简单应用
2011/09/06 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php实现每日签到功能
2018/11/29 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python之list对应元素求和的方法
2018/06/28 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python实现多进程代码示例
2018/10/31 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Django框架表单操作实例分析
2019/11/04 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
python 实用工具状态机transitions
2020/11/21 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
红色电影观后感
2015/06/18 职场文书
爱的教育读书笔记
2015/06/26 职场文书