根据表格中的某一列进行排序的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.ui.draggable中文文档
Nov 24 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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
B2K与车机的中波PK
2021/03/02 无线电
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
python 实用工具状态机transitions
2020/11/21 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
性能服装:HYLETE
2018/08/14 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
合伙经营协议书
2014/04/18 职场文书
基层党员对照检查材料
2014/08/25 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js