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实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
详解PHP中的PDO类
2015/07/06 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
Array对象方法参考
2006/10/03 Javascript
js 单引号 传递方法
2009/06/22 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Django实现学员管理系统
2019/02/26 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
用Python实现职工信息管理系统
2020/12/30 Python
给国外客户的邀请函
2014/01/30 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2014年个人总结范文
2015/03/09 职场文书
信访维稳承诺书
2015/05/04 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python