動態建立span,input,select,TABLE 行列

1. /*
2. * 參數 :
3. * textValue: 文本值( 欲建立文本儲存格文本值 )
4. * idName    : ID 值 ( 欲建立文本儲存格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. *     用於為特定儲存格置入 INPUT類型 元素(建立)
17. * 參數 :
18. *     obj : 欲建立 INPUT 元素的宿主儲存格對象
19. * textValue: 文本值( 欲建立文本儲存格文本值 )
20. * idName    : ID 值 ( 欲建立文本儲存格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. * 用於產生SELECT元素
36. */
38. function createSelectE(obj,idName){
40. var span=document.createElement("span");
41. span.setAttribute("id",idName);
42. var select=document.createElement("select");     // 建立SELECT元素
44. var op=document.createElement("option");      // 建立OPTION (op)
45. op.setAttribute("value",0);          // 設定OPTION的 VALUE
46. op.appendChild(document.createTextNode("請選擇---")); // 設定OPTION的 TEXT
48. select.appendChild(op);           // 為SELECT 建立一 OPTION(op)
50. span.appendChild(select);
51. obj.appendChild(span);
52. }
54. --------------------------------------------------------------------
56. 實用例子
58. var index=0; 
59. function addRow(){
60. index++;
61. // 要增刪行的TABLE (tbody)
62. t = document.getElementById("omain");
64. objRow = t.insertRow(0);      // 在TABLE中增加ROW,也即<TR>
66. objCell=objRow.insertCell(0);     // 在行中增加儲存格 也即<TD>
67. objCell.setAttribute("id","goodsid");
68. createTextE(objCell,"goodsid",index); // 商品編號 goodsid
71. objCell=objRow.insertCell(1);     // 在行中增加儲存格 也即<TD>
72. objCell.setAttribute("id","goodsname");
73. createSelectE(objCell,"goodsname");
76. objCell=objRow.insertCell(2);     // 在行中增加儲存格 也即<TD>
77. objCell.setAttribute("id","price");
78. createTextE(objCell,"price","2.3（單價）");
80. objCell=objRow.insertCell(3);     // 在行中增加儲存格 也即<TD>
81. objCell.setAttribute("id","count");
82. createInputE(objCell,"count","text",index); // 訂購天數
84. objCell=objRow.insertCell(4);     // 在行中增加儲存格 也即<TD>
85. objCell.setAttribute("id","dcount");
86. createInputE(objCell,"dcount","text",index); // 每天數量
88. objCell=objRow.insertCell(5);     // 在行中增加儲存格 也即<TD>
89. objCell.setAttribute("id","totleprice");
90. createTextE(objCell,"totleprice","總價"+index); // 總價
92. objCell=objRow.insertCell(6);     // 在行中增加儲存格 也即<TD>
93. objCell.setAttribute("id","send");
94. createTextE(objCell,"send","獲贈"+index); // 
96. objCell=objRow.insertCell(7);     // 在行中增加儲存格 也即<TD>
97. objCell.setAttribute("id","bdel");
98. createInputE(objCell,"bdel","button","刪除"+index);
101. }