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 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
node.js实现爬虫教程
Aug 25 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
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与MySQL交互使用详解
2006/10/09 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python异常处理例题整理
2019/07/07 Python
python基础 range的用法解析
2019/08/23 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
个人简历自我评价
2014/01/06 职场文书
集体备课反思
2014/02/12 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
小学生评语大全
2014/04/18 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
千与千寻观后感
2015/06/04 职场文书
惊天动地观后感
2015/06/10 职场文书
重阳节主题班会
2015/08/17 职场文书