The resulting dynamic form (HTML + JavaScript)

Write what you have gone, you can use the web editing tool, you can use the web editing tool to first, and then specify a behavior of the template line program to generate editable according to the content of the template line. The form. At present, it is a bit problem with the support of the radical button (because the dynamic form is implemented by the array, there is a problem with the radio button group.) I have a problem with what is good. The following is the code of FlexGrid.js:

/ ** * Function Description: Editable Table Form FlexGrid * Properties: * Tableobj - Table Object (Reading) * ObjName - Table Object Name (read-only) * BackgroundColor - Unchecked Background Color ( Can be written) * Color - the foreground color (writable) of the content line is not selected (the foreground color of the control cannot be changed during unchecked (because the control is read-only attribute in the case of the selected line, the color is disabled )) * SELECTEDBACKGROUNDCOLOR - Select the background color of the content line (writable) * SelectedColor - Select the foreground color of the content line (written) * RowContentModule - Template Row Object (read-only) * Rowcount - Total Big number ( Not included in the head) * Colcount - Total number of columns (content ranks) * CellsModule - Tmmodeline cell content collection (HTML code form, CellsModule [column index (0 start)] - Returns the template content of the column) (read only) * StarTrowIndex - row index started by the content line (based on the entire table object (including header)) (read-only) * SELECTEDROWID - currently selected row index (based on The entire table object (including the header), indicates that there is no routine when -1) (read-only) *: * addNewRow () - Add new line * getValue (ObjName, RowIndex) - Return to the object value (ObjName object Name, RowIndex row index (does not include the header, starting from 0) * setValue (ObjName, RowIndex, Values) - Set the object value (ObjName object name, RowIndex row index (not including the header, starting from 0), VALUES Value) * SELECTEDROW (NewSelectedRowID) - Selected Row (NewSelectedRowID) * getobjType (OBJ) - Return to the type code of the form object (OBJ form object) * Deleterow () - Delete * selected lines of: Sundy_QSW * unit: www.topit.com.cn * date: 2004/05/13 * / / ** * function: editable form class constructor * input parameters: tblobj-- table object (

Object) * RowContentModule - Template Row Object (< Tr> Object) * This line is a dynamic table, which is used to construct other content lines, and the line does not exist (deleted) * current version only support text box, password box, multi-line Text box, radio list box, check button form object (tired) * For radio buttons, only support group group, do not support packets * ObjName - Table object name (character type,

Table name of the object) * Returns: editable form objects like FlexGrid * Author: Sundy_QSW * Unit: www.topit.com.cn * Date: 2004/05/13 * / function FlexGrid (tblobj, RowContentModule, objname) {this .tableobj = tblobj; this.objname = objname; this.backgroundColor = "# FFFFFF" this.color = "# ff0000"; this.selectedbackgroundColor = "# 63BADA" this.selectedColor = "# 0000ff"; this.RowContentModule = RowContentModule ; this.rowcount = 0; this.colcount = RowContentModule.cells.length; this.cellsmodule = new Array (this.colcount); this.startrowindex = RowContentModule.rowIndex; for (i = 0; i

/ ** * Function Description: Get the value of the object in the specified row * Enter parameters: objName - Object Name * RowIndex - row index (does not include the header, starting from 0) * Return value: Specify the value of the object in the line, when invalid return null * author: Sundy_QSW * unit: www.topit.com.cn * date: 2004/05/13 * / function tbl_getvalue (objname, rowindex) {var obj = eval ( "document.all." objname) ; If (obj == null) {return null;} if (rowindex> = this.rowcount) {return null;} if (this.rowcount == 0) {Return null;} if (this.rowcount! = 1) {OBJ = Obj [RowIndex];} var Ret = null; switch (obj.type) {copy 'button': ret = obj.value; break; case 'checkbox': Ret = obj.status; break; casser ': Return; case' file ': RET = 0; Break; Case' Image ': Ret = 0; Break; Case' Password ': Ret = Obj.Value; Break; Case' Submit ': RET = Obj.Value; Break; Case 'Reset': Ret = Obj.Value; Break; Case 'Text': Ret = Obj.Value; Break; Case 'SELECT-MULTIPLE': RET = NULL; BREAK; CASE 'SELECT -one ': Ret = Obj.Options [obj.selectedIndIndex] .Value; break; case' textarea ': Ret = Obj.Value; Break; Case' Hidden ': Ret = Obj.Value; Break DEFAULT: RET = NULL;}

Return Ret;}

/ ** * Function Description: Set the value of the object in the specified row * Enter parameters: objName - Object Name * RowIndex - row index (not including the header, starting from 0) * Vaules - value * Return Value: Success return true, otherwise returns false * OF: Sundy_QSW * unit: www.topit.com.cn * date: 2004/05/13 * / function tbl_setvalue (objname, rowindex, vaules) {var obj = eval ( "document.all." ObjName); if (obj == null) {return null;} if (rowindex> = this.rowcount) {Return False;} if (this.rowcount == 0) {Return False;} if (this.rowcount! = 1) {OBJ = Obj [RowIndex];} Switch (obj.type) {case 'button': return false; break; case 'checkbox': alert (values); obj.checked = values; return true; Case 'Radio': Return False; Break; Case 'File': Return False; Break; Case 'Image': Return False; Break; Case 'Password': Obj.Value = VALUES; RETURN TRUE; BREAK; CASE 'SUBMIT' : Returnaf false; Break; Case 'Reset': Return False; Break; Case 'Text': Obj.Value = VALUES; RETURUE; Break; Case 'Select-Multiple': Return False; Break; Case 'Select-One' : For (var i = 0; i

/ * ** Description: Returns the type of form object * Input parameters: obj-- form object * Return Value: returns the object support corresponding object code, the object does not support return -1 * OF: Sundy_QSW * Unit: WWW .topit.com.cn * Date: 2004/05/13 * / Function TBL_GETOBJTYPE (OBJ) {if (Obj.Type == 'Button') {RETURN 0;} IF (Obj.Type == 'Checkbox') { Return 1;}}} {return 2;} if (obj.type == 'image') {return -1;} if (obj.type == 'password') {Return 4;} if (obj.type == 'submit') {return 5;} if (obj.type == 'reset') {return 6;} if (obj.type == 'text') {RETURN 7; } If (obj.type == 'select-multiple') {return 8;} if (obj.type == 'select-one') {return 9;} if (obj.type == 'textarea') {Return 10;} if (obj.type == 'hidden') {return -1;} return -1;}

/ ** * Function Description: Select line * Enter parameters: newselectedrowid - The row index to select (including the header) (optional, default through the row index * return value: no * author : Sundy_qsw * Unit: www.topit.com.cn * Date: 2004/05/13 * / Function TBL_SELECTEDROW (NewSelectedRowID) {var awayvent = false; // What is the way to call, FALSE is a function call, True is called; if (newselectedrowid == null) {var obj = event.srcelement; while (obj! = null && obj.tagname! = 'tr') {Obj = obj.parentelement;} if (Obj! = null) {newselectedrowid = obj.rowIndex;} else {return;} fromevent = true;} if (newselectedrowid <0 || newselectedrowid == null) {return;} if (this.selectedrowid == newselectedrowid && fromevent) {return;} var cell; var content; if (! this.selectedrowid = - 1) {this.tableobj.rows [this.selectedrowid] .style.backgroundColor = this.backgroundColor; this.tableobj.rows [this.selectedrowid] .style.color = this. Color; for (var i = 0; i

this.tableobj.Rows [newselectedrowid] .cells [i]; content = cell.children [0]; for (var j = 0; j

Test page SAMPLE.htm