以前我們使用JavaScript制作過(guò)一個(gè)JS類MyTable，用于操作表格，但使用上還是有不便的地方，今天把它修改了一下，增加了幾個(gè)類函數(shù)和兩個(gè)輔助函數(shù)，現(xiàn)在更方便一些了。
JS類MyTable代碼如下：
/*************************
*
* Class:MyTable
* 2009.08.22
**************************/
//-- Contructor
function MyTable(id){
this.table=$(id);
}
//-- Clear Rows except the first
MyTable.prototype.clear=function(){
while(this.table.rows.length>0){
this.table.deleteRow(0);
}
}
//-- Append a row to table
MyTable.prototype.getRowCount=function(){
return this.table.rows.length;
}
//-- Append a row to table
MyTable.prototype.appendRow=function(row){
this.table.appendChild(row);
this.refreshRowColor();
}
//-- remove a row to table
MyTable.prototype.removeRow=function(id){
var delRow=$(id);
delRow.parentNode.removeChild(delRow);
this.refreshRowColor();
}
//-- refresh a row's backgroud-color
MyTable.prototype.refreshRowColor=function(){
for(var i=0;i<this.table.childNodes.length;i++){
this.table.childNodes[i].className=((i % 2==1)?"odd":"even");
}
}
//-- create a text cell
function createTextTd(text){
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}
//-- create a link cell
function createLinkTd(text,url){
var link=document.createElement("a");
link.appendChild(document.createTextNode(text));
link.setAttribute("href",url);
var cell=document.createElement("td");
cell.appendChild(link);
return cell;
}
取得的效果：
全體代碼下載（注意CSS文件變更了）：
http://www.tkk7.com/Files/heyang/JsTable20090822214752.rar