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 程序库的比较(一)之DOM功能
Apr 07 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JavaScript 基本概念
Jan 20 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
ES6中let 和 const 的新特性
Sep 03 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
js实现计时器秒表功能
Dec 16 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python中对列表排序实例
2015/01/04 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
教育孩子心得体会
2014/01/01 职场文书
工作迟到检讨书
2014/02/21 职场文书
教堂婚礼主持词
2014/03/14 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
党支部四风整改方案
2014/10/25 职场文书
先进学校事迹材料
2014/12/30 职场文书
考试没考好检讨书
2015/05/06 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers