javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)


Posted in Javascript onJuly 25, 2012

首先创建html页面为sort.html ,并把下面的内容复制进去

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
.desc span{ display:none;} 
.asc em{ display:none;} 
</style> 
<script type="text/javascript" src="sort.js"></script> 
</head> 
<body> 
<table width="200" border="1" cellpadding="0" cellspacing="0" sort="true" id="mytab"> 
<thead style="cursor:pointer"> 
<tr> 
<td class="desc">ID<span>|</span><em>-</em></td> 
<td class="desc">name<span>|</span><em>-</em></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>开心</td> 
</tr> 
<tr> 
<td>3</td> 
<td>开饭</td> 
</tr> 
<tr> 
<td>5</td> 
<td>开放</td> 
</tr> 
</tbody> 
</table> 
<table width="200" border="1" sort="true" id="mytabs"> 
<thead style="cursor:pointer"> 
<tr> 
<td class="desc">ID<span>|</span><em>-</em></td> 
<td class="desc">name<span>|</span><em>-</em></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>开心</td> 
</tr> 
<tr> 
<td>3</td> 
<td>开饭</td> 
</tr> 
<tr> 
<td>5</td> 
<td>开放</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

新建脚本页 sort.js

/* 
表格排序功能 
事件:2012 7 24 
DOM 节点 
如果表格需要排序 在表格属性中添加 sort="true" 
并且 id是唯一并且是必须的 
此js文件直接引入即可 
因为制作的仓储 没有注释 
<table width="200" border="1" sort="true" id="mytab"> 
<thead style="cursor:pointer"> 
<tr> 
<td class="desc">ID<span>|</span><em>-</em></td> 
<td class="desc">name<span>|</span><em>-</em></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>开心</td> 
</tr> 
<tr> 
<td>3</td> 
<td>开饭</td> 
</tr> 
<tr> 
<td>5</td> 
<td>开放</td> 
</tr> 
</tbody> 
</table> 
*/ 
var Core = (function(window){ 
return { 
init: function(){ 
Core.getTableById(); 
Core.setHeadClick(); 
}, 
I: function(id){ 
return document.getElementById(id); 
}, 
N: function(name){ 
return document.getElementsByTagName(name); 
}, 
config: { 
arr:[] 
}, 
getTableById: function(){ 
var table_arr=Core.N("table"); 
for(var i = 0; i < table_arr.length; i++){ 
if(table_arr[i].getAttribute("sort")){ 
Core.config.arr.push(table_arr[i].getAttribute("id")); 
} 
} 
//alert(Core.config.arr) 
}, 
setHeadClick: function(){ 
var arr = Core.config.arr; 
if(!arr.length) return false; 
for(var j = 0 ; j< arr.length;j++){ 
var thead = Core.I(arr[j]).getElementsByTagName("thead")[0].getElementsByTagName("td"); 
for(var i = 0; i<thead.length;i++){ 
if(thead[i].attachEvent){ 
thead[i].attachEvent("onclick",Core.sortList) 
}else{ 
thead[i].addEventListener("click",Core.sortList,false) 
} 
//if(i==0){ 
// thead[i].click(); 
// } 
} 
} 
}, 
sortList: function(e){ 
var index=0,arr=[],sort="asc",table=null; 
if(e.srcElement){ 
index=e.srcElement.cellIndex; 
sort=e.srcElement.getAttribute("sort"); 
e.srcElement.className=sort == "asc" ? "desc" : "asc"; 
e.srcElement.setAttribute("sort", sort == "asc" ? "desc" : "asc"); 
table = Core.getTableId(e.srcElement) 
}else{ 
index=e.currentTarget.cellIndex; 
sort=e.currentTarget.getAttribute("sort"); 
e.currentTarget.className=sort == "asc" ? "desc" : "asc"; 
e.currentTarget.setAttribute("sort", sort == "asc" ? "desc" : "asc"); 
table = Core.getTableId(e.currentTarget) 
} 
Core.getList(table,index,arr); 
Core.updateList(table,sort,arr); 
}, 
getTableId: function(p){ 
for(var i=0,n=p;n=n.parentNode;i++){ 
if(i>100) break; 
if(n.nodeName=="TABLE"){ 
//alert(n.nodeName/*n.getAttribute("id")*/) 
return n; 
} 
} 
}, 
getList: function (table,index,arr){ 
var table = table.getElementsByTagName("tbody")[0]; 
for(var i = 0; i< table.rows.length; i++){ 
var item = table.rows[i]; 
for(var j = 0; j< item.cells.length;j++){ 
var jtem = item.cells[index]; 
if(jtem.innerHTML){ 
//alert(jtem.innerHTML) 
arr[i]=jtem.innerHTML; 
} 
break; 
} 
} 
}, 
updateList: function (table,sort,arr){ 
var table = table.getElementsByTagName("tbody")[0]; 
for(var i = 0; i< arr.length;i++){ 
for(var j = i+1;j< arr.length;j++){ 
if(sort=="asc"){ 
if(arr[i] > arr[j]){ 
var rwos=table.rows[i].cloneNode(true); 
table.replaceChild(table.rows[j],table.rows[i]); 
if(j+1==arr.length){ 
//table.insertBefore(rwos,null); 
table.appendChild(rwos) 
}else{ 
table.insertBefore(rwos,table.rows[j]); 
} 
var tim= arr[i]; 
arr.splice(i,1,arr[j]); 
arr.splice(j,1,tim); 
} 
}else{ 
if(arr[i] < arr[j]){ 
var rwos=table.rows[i].cloneNode(true); 
table.replaceChild(table.rows[j],table.rows[i]); 
if(j+1==arr.length){ 
//table.insertBefore(rwos,null); 
table.appendChild(rwos) 
}else{ 
table.insertBefore(rwos,table.rows[j]); 
} 
var tim= arr[i]; 
arr.splice(i,1,arr[j]); 
arr.splice(j,1,tim); 
} 
} 
} 
} 
} 
}; 
})(window); 
window.onload=Core.init;
Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
jQuery实现验证码功能
Mar 17 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Vue SSR 组件加载问题
May 02 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
浅谈javascript的原型继承
Jul 25 #Javascript
基于jquery的多功能软键盘插件
Jul 25 #Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 #Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 #Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 #Javascript
原生js 秒表实现代码
Jul 24 #Javascript
javascript设计模式 接口介绍
Jul 24 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javascript multibox 全选
2009/03/22 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
babel基本使用详解
2017/02/17 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
质检部岗位职责
2013/11/11 职场文书
童装店创业计划书
2014/01/09 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
工作鉴定评语
2014/05/04 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2015年中个人总结范文
2015/03/10 职场文书
民事调解协议书
2016/03/21 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
解析python中的jsonpath 提取器
2022/01/18 Python