表格动态添加

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4       < title > Untitled Page </ title >
 5 
 6       < script  language ="javascript" >
 7       function  inertStr()
 8      {
 9           var  f = document.form1;
10           var  value1 = document.getElementById( " txtname " ).value;
11           var  value2 = document.getElementById( " txtsex " ).value;
12           var  value3 = document.getElementById( " txtage " ).value;
13           var  value4 = document.getElementById( " txtsheng " ).value;
14           var  text1 = document.createTextNode (value1);
15           var  text2 = document.createTextNode (value2);
16           var  text3 = document.createTextNode (value3);
17           var  text4 = document.createTextNode (value4);
18           var  td1 = document.createElement( " td " );
19           var  td2 = document.createElement( " td " );
20           var  td3 = document.createElement( " td " );
21           var  td4 = document.createElement( " td " );
22           var  tr = document.createElement( " tr " );
23           var  tbody = document.createElement( " tbody " );
24          td1.appendChild(text1);
25          td2.appendChild(text2);
26          td3.appendChild(text3);
27          td4.appendChild(text4);
28          tr.appendChild(td1);
29          tr.appendChild(td2);
30          tr.appendChild(td3);
31          tr.appendChild(td4);
32          tbody.appendChild(tr);
33           var  parNode = document.getElementById ( " table1 " );
34          parNode.appendChild(tbody);        
35      }
36       </ script >
37 
38  </ head >
39  < body >
40       < form  name ="form1"  id ="form1" >
41           < input  name ="insert"  type ="button"  id ="insert"  value ="留言"  onclick ="javascript:inertStr()"   />
42           < table  width ="400"  border ="1"  id ="table1" >
43               < tbody >
44                   < tr >
45                       < td >
46                           < input  id ="txtname"  name  ="txtname"  type ="text"  value  ="" />
47                       </ td >
48                       < td >
49                           < input  id ="txtsex"  name  ="txtsex"  type ="text"  value  ="" />
50                       </ td >
51                       < td >
52                           < input  id ="txtage"  name  ="txtage"  type ="text"  value  ="" />
53                       </ td >
54                       < td >
55                           < input  id ="txtsheng"  name  ="txtsheng"  type ="text"  value  ="" />
56                       </ td >
57                   </ tr >
58                   < tr >
59                       < td >
60                          姓名
61                       </ td >
62                       < td >
63                          性别
64                       </ td >
65                       < td >
66                          年龄
67                       </ td >
68                       < td >
69                          属肖
70                       </ td >
71                   </ tr >
72               </ tbody >
73           </ table >
74       </ form >
75  </ body >
76  </ html >

转载于:https://www.cnblogs.com/jeffery19830101/archive/2007/03/26/688920.html