<rt id="bn8ez"></rt>

<label id="bn8ez"></label>

<span id="bn8ez"></span>

<label id="bn8ez"><meter id="bn8ez"></meter></label>

太陽雨

痛并快樂著

BlogJava

67 Posts :: 3 Stories :: 33 Comments :: 0 Trackbacks

表格操作類(添加，刪除，排序，上移，下移)

<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>

posted on 2008-12-02 13:21 小蟲旺福閱讀(1372) 評論(0) 編輯收藏所屬分類: Javascript相關

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: IE下的js調試工具 companion.js 讀書筆記之JavaScript對象繼承讀書筆記之JavaScript的類編寫方法 40 個輕量級 JavaScript 庫常用jsp技巧用Javascript實現評估用戶輸入密碼的強度表格操作類(添加，刪除，排序，上移，下移) 文本框輸入限制 Javascript 操作select控件大全（新增、修改、刪除、選中、清空、判斷存在等） prototype.js　1.4版開發者手冊

主站蜘蛛池模板：国产亚洲综合成人91精品| 天天爽亚洲中文字幕| 曰批全过程免费视频播放网站| 久久精品国产亚洲AV蜜臀色欲 | 久久久久国色AV免费观看| 久久91亚洲精品中文字幕| 精品日韩99亚洲的在线发布| 国产成人无码区免费A∨视频网站| ASS亚洲熟妇毛茸茸PICS| 国产婷婷高清在线观看免费| 久久久久久免费一区二区三区| 国产亚洲综合一区柠檬导航| 在线a级毛片免费视频| 国产精品午夜免费观看网站| 亚洲一区在线视频| 亚洲色成人WWW永久网站| 成人黄动漫画免费网站视频 | 激情吃奶吻胸免费视频xxxx| 亚洲AV成人一区二区三区AV| 日韩毛片无码永久免费看| 香蕉免费一区二区三区| 福利片免费一区二区三区| 亚洲精品动漫在线| 成人亚洲性情网站WWW在线观看| 国产精品内射视频免费| 亚洲午夜无码毛片av久久京东热| 久热综合在线亚洲精品| 成人浮力影院免费看| 一级免费黄色毛片| 亚洲精品V天堂中文字幕| 亚洲精品不卡视频| 亚洲中文字幕无码日韩| 国产又长又粗又爽免费视频| 在线看免费观看AV深夜影院| 免费成人在线电影| h在线看免费视频网站男男| 亚洲AV成人片无码网站| 亚洲人成77777在线播放网站不卡| 国产一区二区视频免费| 久久国产精品一区免费下载| h视频免费高清在线观看|