动态新建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. }