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: