JS实现的表格操作类详解(添加,删除,排序,上移,下移)


Posted in Javascript onDecember 22, 2015

本文实例讲述了JS实现的表格操作类。分享给大家供大家参考,具体如下:

运行效果截图如下:

JS实现的表格操作类详解(添加,删除,排序,上移,下移)

点击此处查看在线演示。

具体代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css">*{font-size:14px}button{margin:3px}</style> 
<script type="text/javascript"> 
var mytable=null,mytable2=null; 
window.onload=function(){ 
mytable=new CTable("tbl",10); 
mytable2=new CTable("tbl2",6); 
} 
Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)} 
function $A(arrayLike){ 
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]); 
return ret 
} 
Function.prototype.bind = function() { 
 var __method = this, args = $A(arguments), object = args.shift(); 
 return function() { 
  return __method.apply(object, args.concat($A(arguments))); 
 } 
} 
function CTable(id,rows){ 
this.tbl=typeof(id)=="string"?document.getElementById(id):id; 
if (rows && /^\d+$/.test(rows)) this.addrows(rows) 
} 
CTable.prototype={ 
addrows:function(n){ //随机添加n个tr 
new Array(n).each(this.add.bind(this)) 
}, 
add:function(){ //添加1个tr 
var self=this; 
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1); 
var chkbox=document.createElement("INPUT") 
chkbox.type="checkbox" 
chkbox.onclick=self.highlight.bind(self) 
td1.appendChild(chkbox) 
td1.setAttribute("width","35") 
td2.innerHTML=Math.ceil(Math.random()*99) 
td3.innerHTML=Math.ceil(Math.random()*99) 
}, 
del:function(){ //删除所选tr 
var self=this 
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)}) 
}, 
up:function(){ //上移所选tr 
var self=this 
var upOne=function(tr){ //上移1个tr 
if (tr.rowIndex>0){ 
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1]) 
self.getChkBox(tr).checked=true 
} 
} 
var arr=$A(self.tbl.rows).reverse() 
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
for(var i=arr.length-1;i>=0;i--){ 
if (self.getChkBox(arr[i]).checked){ 
arr.pop()      
}else{ 
break 
} 
} 
} 
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)}); 
}, 
down:function(){ 
var self=this 
var downOne=function(tr){    
if (tr.rowIndex<self.tbl.rows.length-1) { 
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]); 
self.getChkBox(tr).checked=true; 
} 
} 
var arr=$A(self.tbl.rows) 
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
for(var i=arr.length-1;i>=0;i--){ 
if (self.getChkBox(arr[i]).checked){ 
arr.pop() 
}else{ 
break 
} 
} 
} 
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)}); 
}, 
sort:function(){ //排序  
var self=this,order=arguments[0]; 
var sortBy=function(a,b){ 
if (typeof(order)=="number"){ //数字,则按数字指示的列排序 
return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1;  //转化为数字类型比较大小 
}else if (typeof(order)=="function"){ //为程序,按 程序的返回结果排序 
return order(a,b); 
}else{ 
return 1; 
} 
} 
$A(self.tbl.rows).sort(sortBy).each(function(x){ 
var checkStatus=self.getChkBox(x).checked; 
self.tbl.firstChild.appendChild(x); 
if (checkStatus) self.getChkBox(x).checked=checkStatus; 
}); 
}, 
rnd:function(){ //随即选择几行tr 
var self=this,selmax=0,tbl=self.tbl; 
if (tbl.rows.length){ 
 selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的行数不超过tr数的1/4 
 $A(tbl.rows).each(function(x){ 
self.getChkBox(x).checked=false; 
self.restoreBgColor(x) 
}) 
}else{ 
return alert("无数据可以选") 
} 
new Array(selmax).each(function(){ 
var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)] 
self.getChkBox(tr).checked=true; 
self.highlight({target:self.getChkBox(tr)}) 
}) 
}, 
highlight:function(){        //设置tr的背景色 
var self=this; 
var evt=arguments[0] || window.event 
var chkbox=evt.srcElement || evt.target 
var tr=chkbox.parentNode.parentNode 
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr) 
}, 
swapTr:function(tr1,tr2){       //交换tr1和tr2的位置 
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2; 
var tBody=tr1.parentNode 
tBody.replaceChild(tr2,tr1); 
  tBody.insertBefore(tr1,target); 
}, 
getChkBox:function(tr){      //从tr得到 checkbox对象 
return tr.cells[0].firstChild 
}, 
restoreBgColor:function(tr){      
tr.style.backgroundColor="#ffffff" 
}, 
setBgColor:function(tr){ 
tr.style.backgroundColor="#c0c0c0" 
} 
} 
function f(a,b){ 
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; 
return sumRow(a)>sumRow(b)?1:-1; 
} 
</script> 
</head> 
<body> 
<button onClick="javascript:mytable.rnd()">随机选择行</button> 
<button onClick="javascript:mytable.add()">添加一行</button> 
<button onClick="javascript:mytable.del()">删除选定行</button> 
<button onClick="javascript:mytable.up()">上移选定行</button> 
<button onClick="javascript:mytable.down()">下移选定行</button> 
<button onClick="javascript:mytable.sort(1)">按第一列数字排序</button> 
<button onClick="javascript:mytable.sort(f)">按每行数据的和排序</button> 
<table width=100%> 
<tr> 
<td valign="top"><table border id="tbl" width="80%"></table></td> 
<td valign="top"><table border id="tbl2" width="80%"></table></td> 
</tr> 
</table> 
<button onClick="javascript:mytable2.rnd()">随机选择行</button> 
<button onClick="javascript:mytable2.add()">添加一行</button> 
<button onClick="javascript:mytable2.del()">删除选定行</button> 
<button onClick="javascript:mytable2.up()">上移选定行</button> 
<button onClick="javascript:mytable2.down()">下移选定行</button> 
<button onClick="javascript:mytable2.sort(2)">按第二列数字排序</button> 
<button onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button> 
</body> 
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
精通JavaScript的this关键字
May 28 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
Vue实现简单计算器
Jan 20 Vue.js
JS控制按钮10秒钟后可用的方法
Dec 22 #Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 #Javascript
JavaScript判断对象是否为数组
Dec 22 #Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 #Javascript
jquery获取select选中值的方法分析
Dec 22 #Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 #Javascript
点评js异步加载的4种方式
Dec 22 #Javascript
You might like
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
javaScript如何生成xmlhttp
2013/12/16 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
聊聊python中的异常嵌套
2020/09/01 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
九年级政治教学反思
2014/02/06 职场文书
教师读书活动总结
2014/05/07 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
班主任开场白
2015/06/01 职场文书
学生病假条范文
2015/08/17 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS