Implementation of dynamic table Table class_prototype

Copy code The code is as follows:

///
///
//Introducing DataBinder.js
include("DataBinder.js");
/*

< /th>

*/
function Table(){
this.elmTable=null; //Table label
this.templetRow=null; //Template row
this.displayBody=null; //Display area tbody label
this.isOverChange=false; //When the mouse moves over, whether to change the color
this.hoverColor="#EBF3FD"; //The color when the mouse moves over
this.isActiveChange=false; //Whether the color changes when the row is clicked
this.activeColor="#D9E8FB"; //The color when the row is clicked
this.activeRow=null; //The current active row
}
Table.prototype = {
//Set whether to change the color when the mouse moves over
SetOverChange: function(bOverChange) {
this.isOverChange = bOverChange;
},
//Set whether to change the color when the row is clicked
SetActiveChange: function(bActiveChange) {
this.isActiveChange = bActiveChange;
},
//Bind table object
BindElement: function(elm) {
this.elmTable = elm;
Event.observe(this.elmTable, "mouseover", this.onMouseOver.bindAsEventListener(this));
Event.observe(this.elmTable, "mouseout", this.onMouseOut.bindAsEventListener(this));
Event.observe(this.elmTable, "click", this.onMouseClick.bindAsEventListener(this));
var tbody = this.elmTable.tBodies [0]; //Take the first tbody as the template
this.templetRow = tbody.rows[0]; //Take the first row in the tbody as the template
this.elmTable.removeChild(tbody) ;
this.displayBody = document.createElement("TBODY"); //Create the display area tbody
this.elmTable.appendChild(this.displayBody); //Add to the table
},
//Bind table ID
BindID: function(id) {
var elm = document.getElementById(id);
this.BindElement(elm);
},
_getEventRow : function(evn) {
var elm = Event.element(evn);
if (elm == this.elmTable) return null;
while (elm.tagName.toLowerCase() != "tr ") {
elm = elm.parentNode;
if (elm == this.elmTable || elm == null) return null;
}
if (elm.parentNode != this.displayBody ) return null;
return elm;
},
//Event response when the mouse moves over
onMouseOver: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
row.style.backgroundColor = this.hoverColor; //Change color
}
},
//Mouse Event response when moving out
onMouseOut: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
if (row == this.activeRow) {
//If the current row is the active row, set the active row color
row.style.backgroundColor = this.activeColor;
}
else {
//Set as template row color
row.style.backgroundColor = row.backgroundColor;
}
}
},
//Row click event response
onMouseClick: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isActiveChange) {
if (this.activeRow != null) {
//Restore the original active row color
this.activeRow.style.backgroundColor = this.activeRow.backgroundColor;
}
//Set the active row color
row.style.backgroundColor = this.activeColor;
//Set the current behavior active row
this.activeRow = row;
}
},
//Add a new row, the row structure is consistent with the template row
NewRow: function(bAdd) {
var _this = this;
var newRow = this.templetRow.cloneNode(true); //Make a deep copy of the template row
newRow.backgroundColor = newRow.style. backgroundColor;
//Add to the table display area
if (bAdd == true || bAdd == null) {
this.displayBody.appendChild(newRow);
}
return newRow; //Return new row
},
//Get all rows
GetRows: function() {
return this.displayBody.rows;
},
//Clear All lines
Clear: function() {
var newTbody = document.createElement("TBODY");
this.elmTable.replaceChild(newTbody, this.displayBody);
this.displayBody = newTbody ;
},
//Delete a row
DeleteRow: function(row) {
this.elmTable.deleteRow(row.rowIndex);
if (row == this.activeRow) {
this.activeRow = null;
}
},
//The subscript is the parameter, delete a row
DeleteAt: function(index) {
this.displayBody.deleteRow(index );
var rows = this.GetRows();
if (rows[index] == this.activeRow) {
this.activeRow = null;
}
},
//Add a row
AddRow: function(row) {
this.displayBody.appendChild(row);
},
onBinding: function(row) { },
// Data binding
BindData: function(dataSource, mapList) {
var _this = this;
this.Clear();
this.repeater = new Repeater();
this.repeater.setMapList(mapList);
this.repeater.defaultCreateItem = function() {
var row = _this.NewRow(false);
return row;
};
this.repeater.setDataList(dataSource);
this.repeater.setContainer(this.displayBody);
this.repeater.Bind();
}
};

Use sample code:

Copy code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">

Name	Gender	Age	Operation
	Male< ;/option> Female		Save View

An example of manually generating data. If you want to implement the above dynamic editing, For the data saving function, more code must be added to achieve it. This method is generally not recommended

Copy code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">














< th>Age



< td id="tdName">

Name	Gender	Operation
		View