根据表格中的某一列进行排序的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 prototype,executing,context,closure
Dec 24 Javascript
潜说js对象和数组
May 25 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
JS实现简单的表格增删
Jan 16 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注释实例技巧
2008/10/03 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vant实现购物车功能
2020/06/29 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python tqdm库的使用
2020/11/30 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
 python中的元类metaclass详情
2022/05/30 Python