Dynamic Table class implementation _ prototype

File Name: Table. js this file depends on prototype. js, prototype_ext.js, Lib. js, and DataBinder. js. Please refer to my other articles. The Code is as follows:

///
///
// Introduce DataBinder. js
Include ("DataBinder. js? 1.1.9 ");
/*

*/
Function Table (){
This. elmTable = null; // table label
This. templetRow = null; // template row
This. displayBody = null; // display area tbody tag
This. isOverChange = false; // determines whether to change the color when the mouse moves out of date.
This. hoverColor = "# EBF3FD"; // move the mouse over the color
This. isActiveChange = false; // specifies whether to change the color when a 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 out.
SetOverChange: function (bOverChange ){
This. isOverChange = bOverChange;
},
// Set whether to change the color when a row is clicked.
SetActiveChange: function (bActiveChange ){
This. isActiveChange = bActiveChange;
},
// Bind a 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]; // use the first tbody as the template.
This. templetRow = tbody. rows [0]; // obtain the first behavior template in the tbody.
This. elmTable. removeChild (tbody );
This. displayBody = document. createElement ("TBODY"); // create a tbody
This. elmTable. appendChild (this. displayBody); // Add it to the table.
},
// ID of the bound table
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;
},
// Response to the mouse-shift out-of-date event
OnMouseOver: function (evn ){
Var row = this. _ getEventRow (evn );
If (! Row) return;
If (this. isOverChange ){
Row. style. backgroundColor = this. hoverColor; // change the color.
}
},
// Move the cursor out of the Current Event Response
OnMouseOut: function (evn ){
Var row = this. _ getEventRow (evn );
If (! Row) return;
If (this. isOverChange ){
If (row = this. activeRow ){
// If the current row is an active row, set the active row color
Row. style. backgroundColor = this. activeColor;
}
Else {
// Set the template row color
Row. style. backgroundColor = row. backgroundColor;
}
}
},
// Response to the row Click Event
OnMouseClick: function (evn ){
Var row = this. _ getEventRow (evn );
If (! Row) return;
If (this. isActiveChange ){
If (this. activeRow! = Null ){
// Restore the color of the original active row
This. activeRow. style. backgroundColor = this. activeRow. backgroundColor;
}
// Set the activity line color
Row. style. backgroundColor = this. activeColor;
// Set the active row of the current behavior
This. activeRow = row;
}
},
// Add a new row. The structure of this row is consistent with that of the template.
NewRow: function (bAdd ){
Var _ this = this;
Var newRow = this. templetRow. cloneNode (true); // perform 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 a new row.
},
// Retrieve all rows
GetRows: function (){
Return this. displayBody. rows;
},
// Clear all rows
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;
}
},
// Delete a row as a parameter
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 ();
}
};

Sample Code:

The Code is as follows:

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