Dynamic Table class implementation

Copy codeThe Code is as follows:
/// <Reference path = "Lib. js"/>
/// <Reference path = "DabaBinder. js"/>
// Introduce DataBinder. js
Include ("DataBinder. js ");
/*
<Table border = "1">
<Thead> <tr>
<Th> </th>
</Tr> </thead>
<Tbody> <tr>
<Td> </td>
</Tr> </tbody>
</Table>
*/
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:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<! -- Three files required for library files -->
<Script src = "../JsLib/prototype. js" type = "text/javascript"> </script>
<Script src = "../JsLib/prototype_ext.js" type = "text/javascript"> </script>
<Script src = "../JsLib/Lib. js" type = "text/javascript"> </script>
<! -- Three files required for library files -->
<Script language = "javascript" type = "text/javascript"> <! --
Include ("Table. js"); // header file inclusion
// Data
Var users = [{user: "Michael", sex: "M", age: 20 },
{User: "Li Si", sex: "F", age: 23 },
{User: "Wang Wu", sex: "M", age: 22}];
// Ing between data and templates
Var mapList = [{id: "tdName", field: "user "},
{Id: "sltSex", field: "sex "},
{Id: "tbAge", field: "age"}];
Lib. main = function () {// This is the main function
Var tblUser = new Table ();
TblUser. BindID ("tableUser"); // bind to tableUser
TblUser. SetOverChange (true); // The line color changes when the cursor passes.
TblUser. BindData (users, mapList); // bind data
};
Function View (btn ){
Var row = btn. parentNode. parentNode; // obtain the row
Var data = row. data; // obtain the data bound to this row
Alert (data. user + "\ r \ n" + data. sex + "\ r \ n" + data. age );
}
Function Save (btn ){
Var row = btn. parentNode. parentNode; // obtain the row
Var db = row. dataBinder; // gets the binder for this row
Db. Save (); // Save the row
// If you want to Save the data of all rows at a time, use tblUser's repeater. Save ();
}
// --> </Script>
</Head>
<Body>
<Table id = "tableUser" border = "1" width = "400">
<Thead> <tr>
<Th> name </th>
<Th> gender </th>
<Th> age </th>
<Th> operation </th>
</Tr> </thead>
<Tbody> <tr>
<Td id = "tdName"> </td>
<Td>
<Select id = "sltSex">
<Option value = "M"> male </option>
<Option value = "F"> female </option>
</Select>
</Td>
<Td> <input id = "tbAge" type = "text" size = "4"/> </td>
<Td> <a href = "javascript:;" onclick = "Save (this)"> Save </a>
<A href = "javascript:;" onclick = "View (this)"> View </a> </td>
</Tr> </tbody>
</Table>
</Body>
</Html>

An example of manually generating data. For example, if you want to implement the above dynamic editing and data saving functions, you need to add more code to achieve this. This method is generally not recommended.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<! -- Three files required for library files -->
<Script src = "../JsLib/prototype. js" type = "text/javascript"> </script>
<Script src = "../JsLib/prototype_ext.js" type = "text/javascript"> </script>
<Script src = "../JsLib/Lib. js" type = "text/javascript"> </script>
<! -- Three files required for library files -->
<Script language = "javascript" type = "text/javascript"> <! --
Include ("Table. js"); // header file inclusion
// Data
Var users = [{user: "Michael", sex: "M", age: 20 },
{User: "Li Si", sex: "F", age: 23 },
{User: "Wang Wu", sex: "M", age: 22}];
Lib. main = function () {// This is the main function
Var tblUser = new Table ();
TblUser. BindID ("tableUser"); // bind to tableUser
TblUser. SetOverChange (true); // The line color changes when the cursor passes.
// Manually generate data
For (var I = 0; I <users. length; I ++ ){
Var data = users [I];
Var row = tblUser. NewRow (); // generate a new row
// Set the data of each cell
Row. cells ["tdName"]. innerHTML = data. user;
Row. cells ["tdSex"]. innerHTML = (data. sex = "M "? "Male": "female ");
Row. cells ["tdAge"]. innerHTML = data. age;
Row. data = data; // sets the data reference to be provided to the View function.
}
};
Function View (btn ){
Var row = btn. parentNode. parentNode; // obtain the row
Var data = row. data; // obtain the data bound to this row
Alert (data. user + "\ r \ n" + data. sex + "\ r \ n" + data. age );
}
// --> </Script>
</Head>
<Body>
<Table id = "tableUser" border = "1" width = "400">
<Thead> <tr>
<Th> name </th>
<Th> gender </th>
<Th> age </th>
<Th> operation </th>
</Tr> </thead>
<Tbody> <tr>
<Td id = "tdName"> </td>
<Td id = "tdSex"> </td>
<Td id = "tdAge"> </td>
<Td> <a href = "javascript:;" onclick = "View (this)"> View </a> </td>
</Tr> </tbody>
</Table>
</Body>
</Html>