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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
对node.js中render和send的用法详解
May 14 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
VSCode搭建Vue项目的方法
Apr 30 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
document.getElementById介绍
2011/09/13 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
VUE重点问题总结
2018/03/19 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
django文档学习之applications使用详解
2018/01/29 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python @property装饰器原理解析
2020/01/22 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
遵纪守法演讲稿
2014/05/23 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技