根据表格中的某一列进行排序的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中Math对象使用说明
Jan 16 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
详解Vue中的watch和computed
Nov 09 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/02/15 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php实现等比例压缩图片
2018/07/26 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
vue.js实现照片放大功能
2020/06/23 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python常用函数详解
2016/09/13 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
毕业生求职自荐书范文
2014/03/27 职场文书
商业项目策划方案
2014/06/05 职场文书
入党转正申请书范文
2019/05/20 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js