根据表格中的某一列进行排序的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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue实现选中效果
Oct 07 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Python日志模块logging简介
2015/04/13 Python
python绘图方法实例入门
2015/05/19 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
护理工作感言
2014/01/16 职场文书
论文评语大全
2014/04/29 职场文书
主题团日活动总结
2014/06/25 职场文书
英文辞职信范文
2015/05/13 职场文书
读书笔记怎么写
2015/07/01 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书