以前我们使用JavaScript制作过一个JS类MyTable,用于操作表格,但使用上还是有不便的地方,今天把它修改了一下,增加了几个类函数和两个辅助函数,现在更方便一些了。
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.blogjava.net/Files/heyang/JsTable20090822214752.rar