根据表格中的某一列进行排序的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 第三章章节总结的例子
Mar 23 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
alert出数组中的随即值代码
2014/09/25 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Python函数调用追踪实现代码
2020/11/27 Python
浅析python实现动态规划背包问题
2020/12/31 Python
师德个人剖析材料
2014/02/02 职场文书
假面舞会策划方案
2014/05/29 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
员工年终自我评价
2014/09/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
golang中的空slice案例
2021/04/27 Golang
python flask框架快速入门
2021/05/14 Python