根据表格中的某一列进行排序的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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
js实现继承的5种方式
Dec 01 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
js实现拖拽与碰撞检测
Sep 18 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屏蔽过滤指定关键字的方法
2014/11/03 PHP
php常见的魔术方法详解
2014/12/25 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript常用函数(1)
2015/11/04 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
python实现删除文件与目录的方法
2014/11/10 Python
python处理csv数据的方法
2015/03/11 Python
Python与R语言的简要对比
2017/11/14 Python
Python autoescape标签用法解析
2020/01/17 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
C语言开发工程师测试题
2016/12/20 面试题
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android