javascript中表格(table)操作

xxtianxiaxing

浏览: 759381 次
性别:
来自: 陕西

最近访客更多访客>>

dhx20022889

huaiao_chen

Corelory

FirstBlood

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript prototype F#

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<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> 
<br/><br/> 
<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> 
<br/><br/> 
<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>

分享到：

filter | dwr ...设置透明div

2009-03-07 11:42
浏览 1544
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript中表格(table)操作

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript中表格(table)操作

评论

发表评论

相关推荐

事务 不回滚

collectionTest

程序员珍藏的东西

java 重启 路由器 DI-604

java 环境变量

正则表达式替换 html 标签

关联div 拖动大小demo

js 导航分类 特效

js arguments 学习

java 图片 验证码

注册模块 js 校验

EL表达式截取字符串

eclipse myeclipse java 代码 注释 模板

java 字符串指定长度

jquery 做的好看 button

Eclipse中设置在创建新类时自动生成注释

cookie 历史记录

解决javascript读取中文cookie时的乱码问题

静态页面生成

ff和ie通用div置右上角落

最近访客更多访客>>

事务不回滚

java 重启路由器 DI-604

js 导航分类特效

java 图片验证码

eclipse myeclipse java 代码注释模板