根据表格中的某一列进行排序的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实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
从零学Python之hello world
2014/05/21 Python
python概率计算器实例分析
2015/03/25 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
查看Django和flask版本的方法
2018/05/14 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python基础之文件读取的讲解
2019/02/16 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
电气自动化自荐信
2013/10/10 职场文书
中国央视网签名寄语
2014/01/18 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
工程专业应届生求职信
2014/02/19 职场文书
小学生优秀评语大全
2014/04/22 职场文书
门面房租房协议书
2014/12/01 职场文书
英文产品推荐信
2015/03/27 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA