根据表格中的某一列进行排序的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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 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
实现树状结构的两种方法
2006/10/09 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
javascript实现计算器功能
2020/03/30 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python中的字典遍历备忘
2015/01/17 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
开会迟到检讨书
2014/01/08 职场文书
11月红领巾广播稿
2014/01/17 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
大班下学期个人总结
2015/02/13 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python