根据表格中的某一列进行排序的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问题整理
Aug 16 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
js不是基础的基础
2006/12/24 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
python条件和循环的使用方法
2013/11/01 Python
python映射列表实例分析
2015/01/26 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
仓库管理制度
2014/01/21 职场文书
项目合作协议书范本
2014/04/16 职场文书
个人创业事迹材料
2014/12/30 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
投诉书范文
2015/07/02 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL