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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
用javascript实现画板的代码
Sep 05 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
浅谈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
玩转图像函数库―常见图形操作
2006/09/03 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python打包可执行文件的方法详解
2016/09/19 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
《鲁班和橹板》教学反思
2014/04/27 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python