Dynamically create span, input, select, and table columns

1. /*
2. * Parameters:
3. * Textvalue: Text value (to create a text cell text value)
4. * Idname: ID value (to create a text Cell ID)
5. */
6. Function createtexte (OBJ, idname, textvalue ){
8. VaR span = Document. createelement ("span ");
9. Span. setattribute ("ID", idname );
10. Span. appendchild (text1 = Document. createtextnode (textvalue ));
11. OBJ. appendchild (SPAN );
13. }
15. /*
16. * Adds an input element (new) to a specific cell)
17. * Parameters:
18. * OBJ: The Host Cell Object of the input element to be created.
19. * Textvalue: Text value (to create a text cell text value)
20. * Idname: ID value (to create a text Cell ID)
21. */
22. Function createinpute (OBJ, idname, inputtype, inputvalue ){
24. VaR span = Document. createelement ("span ");
25. Span. setattribute ("ID", idname );
26. VaR input = Document. createelement ("input ");
27. Input. setattribute ("type", inputtype );
28. Input. setattribute ("value", inputvalue );
30. Span. appendchild (input );
31. OBJ. appendchild (SPAN );
32. }
34. /*
35. * Used to generate select elements
36. */
38. Function createselecte (OBJ, idname ){
40. VaR span = Document. createelement ("span ");
41. Span. setattribute ("ID", idname );
42. VaR select = Document. createelement ("select"); // create a select Element
44. VaR op = Document. createelement ("option"); // create an option (OP)
45. Op. setattribute ("value", 0); // you can specify the value of option.
46. Op. appendchild (document. createtextnode ("Select ---"); // set the text of Option
48. Select. appendchild (OP); // creates an option (OP) for select)
50. Span. appendchild (select );
51. OBJ. appendchild (SPAN );
52. }
54. --------------------------------------------------------------------
56. Example
58. VaR Index = 0;
59. Function addrow (){
60. Index ++;
61. // The table (tbody) to add or delete rows)
62. T = Document. getelementbyid ("omain ");
64. Objrow = T. insertrow (0); // Add a row to the table, that is, <tr>
66. Objcell = objrow. insertcell (0); // Add a cell in the row, that is, <TD>
67. Objcell. setattribute ("ID", "goodsid ");
68. Createtexte (objcell, "goodsid", index); // item No. goodsid
71. Objcell = objrow. insertcell (1); // Add a cell in the row, that is, <TD>
72. Objcell. setattribute ("ID", "goodsname ");
73. Createselecte (objcell, "goodsname ");
76. Objcell = objrow. insertcell (2); // Add a cell in the row, that is, <TD>
77. Objcell. setattribute ("ID", "price ");
78. Createtexte (objcell, "price", "2.3 (unit price )");
80. Objcell = objrow. insertcell (3); // Add a cell in the row, that is, <TD>
81. Objcell. setattribute ("ID", "Count ");
82. Createinpute (objcell, "Count", "text", index); // Number of days to order
84. Objcell = objrow. insertcell (4); // Add a cell in the row, that is, <TD>
85. Objcell. setattribute ("ID", "dcount ");
86. Createinpute (objcell, "dcount", "text", index); // daily quantity
88. Objcell = objrow. insertcell (5); // Add a cell in the row, that is, <TD>
89. Objcell. setattribute ("ID", "totleprice ");
90. Createtexte (objcell, "totleprice", "Total" + index); // total price
92. Objcell = objrow. insertcell (6); // Add a cell in the row, that is, <TD>
93. Objcell. setattribute ("ID", "send ");
94. Createtexte (objcell, "send", "get" + index );//
96. Objcell = objrow. insertcell (7); // Add a cell in the row, that is, <TD>
97. Objcell. setattribute ("ID", "bdel ");
98. Createinpute (objcell, "bdel", "button", "delete" + index );
101. }