根据表格中的某一列进行排序的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 void(0)的妙用
Oct 21 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
linux iconv方法的使用
2011/10/01 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
js闭包学习心得总结
2018/04/17 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python斐波那契数列的计算方法
2018/09/27 Python
python调用webservice接口的实现
2019/07/12 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
什么是Web Service?
2012/07/25 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
红旗方阵解说词
2014/02/12 职场文书
小班开学寄语
2014/04/04 职场文书
创新社会管理心得体会
2014/09/12 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
升职自我推荐信范文
2015/03/25 职场文书
大学生实习证明
2015/06/16 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Python之基础函数案例详解
2021/08/30 Python