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 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
axios学习教程全攻略
2017/03/26 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python实现神经网络感知器算法
2017/12/20 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Tensorflow 多线程设置方式
2020/02/06 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python与js主要区别点总结
2020/09/13 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
辩论赛主持词
2014/03/18 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年统战工作总结
2014/12/09 职场文书
校车司机安全责任书
2015/05/11 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python