国产精品亚洲专区无码WEB,国产亚洲精AA在线观看SEE,亚洲日韩国产欧美一区二区三区

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

<html>

<head>

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

<tr>

</tr>

</table>

<button onClick="javascript:mytable2.rnd()">隨機選擇行</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版開發者手冊

太陽雨

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

文章檔案

搜索

最新評論

閱讀排行榜

評論排行榜