javascript创建动态表单的方法

这篇文章主要介绍了javascript创建动态表单的方法,实例分析了javascript动态操作页面表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript创建动态表单的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <meta http-equiv="Content-Language" content="zh-CN" /> 
7. <meta name="Keywords" content="" /> 
8. <meta name="Description" content="" /> 
9. <title></title> 
10. <style> 
11. #tab { 
12. border:1px solid #aaa; 
13. border-collapse:collapse; 
14. width:80%; 
15. } 
16. #tab th{ 
17. border:1px solid #aaaaaa; 
18. background:#ECE9D8; 
19. border-collapse:collapse; 
20. padding:5px; 
21. text-align:left; 
22. } 
23. #tab td{ 
24. border:1px solid #d8d8d8; 
25. border-collapse:collapse; 
26. padding:5px; 
27. } 
28. .txt{ 
29. border:1px solid #888; 
30. background:#ECE9D8; 
31. } 
32. .checkBg{ 
33. border:1px solid #aaaaaa; 
34. background:#ECE9D8; 
35. } 
36. .checkTxt{ 
37. border:1px solid #aaa; 
38. background:##d8d8d8; 
39. } 
40. .button { 
41. border:1px solid #888;margin:5px 0px; 
42. width:80px;background:#ECE9D8;height:22px;line-height:22px; 
43. } 
44. </style> 
45. <script language="javascript" type="text/javascript"> 
46. function $(id) {return document.getElementById(id);} 
47. function $F(name){return document.getElementsByTagName(name);} 
48. function add(){ 
49. var otr = document.getElementById("tab").insertRow(-1); 
50. var checkTd=document.createElement("td"); 
51. checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">'; 
52. var otd1 = document.createElement("td"); 
53. otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>'; 
54. var otd2 = document.createElement("td"); 
55. otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>'; 
56. otr.appendChild(checkTd); 
57. otr.appendChild(otd1);  
58. otr.appendChild(otd2);  
59. } 
60. function ccolor() 
61. { 
62. var c1 = document.getElementsByName('checkItem'); 
63. for(var i=0; i<c1.length; i++) 
64. if(c1[i].checked) 
65. { 
66. c1[i].parentNode.parentNode.className="checkBg"; 
67. c1[i].parentNode.nextSibling.firstChild.className="checkTxt"; 
68. c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt"; 
69. } 
70. else { c1[i].parentNode.parentNode.className=""; 
71. c1[i].parentNode.nextSibling.firstChild.className=""; 
72. c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";} 
73. } 
74. function del(){ 
75. var c = document.getElementsByName('checkItem'); 
76. var idArray = new Array(); 
77. for(var i=0; i<c.length; i++) 
78. if(c[i].checked) 
79. idArray.push(i); 
80. var rowIndex; 
81. var nextDiff =0; 
82. for(j=0;j< idArray.length;j++) 
83. { 
84. rowIndex = idArray[j]+1-nextDiff++; 
85. document.getElementById("tab").deleteRow(rowIndex); 
86. } 
87. } 
88. function save(){ 
89. var postString = $("postString"); 
90. var checkboxs = document.getElementsByName("checkItem"); 
91. var ttab = document.getElementsByName("infoName_txt"); 
92. var tt2 = document.getElementsByName("infoValue_txt"); 
93. var idArray = new Array(); 
94. for(i=0;i<checkboxs.length;i++) 
95. { 
96. idArray.push(ttab[i].value + "|" + tt2[i].value);  
97. } 
98. postString.value = idArray.join("-"); 
99. alert(postString.value); 
100. } 
101. function alldell() 
102. { 
103. var des =document.getElementsByName('checkItem'); 
104. for(var i=0;i<des.length;i++) 
105. { 
106. if(des[i].checked=document.getElementById('delall').checked){ 
107. des[i].parentNode.parentNode.className="checkBg"; 
108. des[i].parentNode.nextSibling.firstChild.className="checkTxt"; 
109. des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";} 
110. else{ des[i].parentNode.parentNode.className=""; 
111. des[i].parentNode.nextSibling.firstChild.className=""; 
112. des[i].parentNode.nextSibling.nextSibling.firstChild.className="";} 
113. } 
114. }  
115. </script> 
116. </head> 
117. <body> 
118. <input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" />  
119. <input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" />  
120. <input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br> 
121. <table id="tab" > 
122. <tr> 
123. <th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td> 
124. <th width="40%">Name</td> 
125. <th width="55%">value</td>  
126. </tr> 
127. </table> 
128. <p> 
129. <input type="text" name="postString" id="postString">  
130. </p> 
131. </body> 
132. </html> 

希望本文所述对大家的javascript程序设计有所帮助。