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 相关文章推荐
js时间日期格式化封装函数
Dec 02 Javascript
Jquery注册事件实现方法
May 18 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php URL验证正则表达式
2011/07/19 PHP
使用php清除bom示例
2014/03/03 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
Python实现简单的四则运算计算器
2016/11/02 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python中sys模块是做什么用的
2020/08/16 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
市场部规章制度
2014/01/24 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
考核工作实施方案
2014/03/30 职场文书
村抢险救灾方案
2014/05/09 职场文书
读书笔记格式
2015/07/02 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
2019销售早会主持词
2019/06/27 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
php双向队列实例讲解
2021/11/17 PHP
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
MySQL 条件查询的常用操作
2022/04/28 MySQL