根据表格中的某一列进行排序的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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
JS中操作JSON总结
Dec 06 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
vue实现动态数据绑定
Apr 28 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
smtp邮件发送一例
2006/10/09 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python查找相似单词的方法
2015/03/05 Python
Python中创建二维数组
2018/10/17 Python
python用插值法绘制平滑曲线
2021/02/19 Python
django admin组件使用方法详解
2019/07/19 Python
Python创建数字列表的示例
2019/11/28 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
项目资料员岗位职责
2013/12/10 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
信访工作经验交流材料
2014/05/23 职场文书
合作意向书
2014/07/30 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
会计实训总结范文
2015/08/03 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
前端JavaScript大管家 package.json
2021/11/02 Javascript
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript