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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php中curl使用指南
2015/02/05 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
sina的lightbox效果。
2007/01/09 Javascript
js select常用操作控制代码
2010/03/16 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python更新列表的方法
2015/07/28 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python简易版停车管理系统
2019/08/12 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python 获取计算机的网卡信息
2021/02/18 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
简短大学毕业感言
2014/01/18 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android