根据表格中的某一列进行排序的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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jquery+json实现分页效果
Mar 07 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
让JavaScript代码更加精简的方法技巧
Jun 01 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
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Js面试算法详解
2018/04/08 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python 元类使用说明
2009/12/18 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
深入理解Python对Json的解析
2017/02/14 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Django密码存储策略分析
2020/01/09 Python
python异常处理try except过程解析
2020/02/03 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
什么是Python中的顺序表
2020/06/02 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
大学毕业后的十年规划
2014/01/07 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS