1.js脚本：

       
       
       
       
    
        
        
        
        
  1. function insertStrProfile() { 
    2. 
        
        
        
        
  2.   var frm = dojo.byId('main'); 
    3. 
        
        
        
        
  3.   var name = frm.name.value; 
    4. 
        
        
        
        
  4.   var sex; 
    5. 
        
        
        
        
  5.   var radio = document.getElementsByName('sex'); 
    6. 
        
        
        
        
  6.   for (var i = 0; i < radio.length; i ++) { 
    7. 
        
        
        
        
  7.       if(frm.sex[i].checked) { 
    8. 
        
        
        
        
  8.           sex = radio[i].value; 
    9. 
        
        
        
        
  9.       } 
    10. 
        
        
        
        
  10.   } 
    11. 
        
        
        
        
  11.   var age = frm.age.value; 
    12. 
        
        
        
        
  12.   var address = frm.address.value; 
    13. 
        
        
        
        
  13.    
    14. 
        
        
        
        
  14.   var txtName = document.createTextNode(name); 
    15. 
        
        
        
        
  15.   var txtSex = document.createTextNode(sex); 
    16. 
        
        
        
        
  16.   var txtAge = document.createTextNode(age); 
    17. 
        
        
        
        
  17.   var txtAddress = document.createTextNode(address); 
    18. 
        
        
        
        
  18.    
    19. 
        
        
        
        
  19.   var tdName = document.createElement("td"); 
    20. 
        
        
        
        
  20.   var tdSex = document.createElement("td"); 
    21. 
        
        
        
        
  21.   var tdAge = document.createElement("td"); 
    22. 
        
        
        
        
  22.   var tdAddress = document.createElement("td"); 
    23. 
        
        
        
        
  23.    
    24. 
        
        
        
        
  24.   var tr = document.createElement("tr"); 
    25. 
        
        
        
        
  25.  
    26. 
        
        
        
        
  26.   tdName.appendChild(txtName); 
    27. 
        
        
        
        
  27.   tdSex.appendChild(txtSex); 
    28. 
        
        
        
        
  28.   tdAge.appendChild(txtAge); 
    29. 
        
        
        
        
  29.   tdAddress.appendChild(txtAddress); 
    30. 
        
        
        
        
  30.    
    31. 
        
        
        
        
  31.   tr.appendChild(tdName); 
    32. 
        
        
        
        
  32.   tr.appendChild(tdSex); 
    33. 
        
        
        
        
  33.   tr.appendChild(tdAge); 
    34. 
        
        
        
        
  34.   tr.appendChild(tdAddress); 
    35. 
        
        
        
        
  35.  
    36. 
        
        
        
        
  36.   var parNode = document.getElementById("tbProfile"); 
    37. 
        
        
        
        
  37.   parNode.appendChild(tr); 
    38. 
        
        
        
        
  38. }
    39.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.HTML代码： 

       
       
       
       
    
        
        
        
        
  1. <tr> 
    2. 
        
        
        
        
  2.   <td><table width="50%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> 
    3. 
        
        
        
        
  3.     <tr> 
    4. 
        
        
        
        
  4.       <td width="29%" bgcolor="#EBEBEB">Name:td> 
    5. 
        
        
        
        
  5.       <td width="71%" bgcolor="#EBEBEB"><input type="text" name="name" />td> 
    6. 
        
        
        
        
  6.     tr> 
    7. 
        
        
        
        
  7.     <tr> 
    8. 
        
        
        
        
  8.       <td bgcolor="#EBEBEB">Age:td> 
    9. 
        
        
        
        
  9.       <td bgcolor="#EBEBEB"><input type="text" name="age" />td> 
    10. 
        
        
        
        
  10.     tr> 
    11. 
        
        
        
        
  11.     <tr> 
    12. 
        
        
        
        
  12.       <td bgcolor="#EBEBEB">Sex:td> 
    13. 
        
        
        
        
  13.       <td bgcolor="#EBEBEB"><input type="radio" name="sex" checked="checked" value="Male" /> 
    14. 
        
        
        
        
  14.         Male 
    15. 
        
        
        
        
  15.           <input type="radio" name="sex" value="Female" /> 
    16. 
        
        
        
        
  16.           Femaletd> 
    17. 
        
        
        
        
  17.     tr> 
    18. 
        
        
        
        
  18.     <tr> 
    19. 
        
        
        
        
  19.       <td bgcolor="#EBEBEB">Address:td> 
    20. 
        
        
        
        
  20.       <td bgcolor="#EBEBEB"><input type="text" name="address" />td> 
    21. 
        
        
        
        
  21.     tr> 
    22. 
        
        
        
        
  22.     <tr> 
    23. 
        
        
        
        
  23.       <td colspan="2" bgcolor="#EBEBEB"><div align="right"> 
    24. 
        
        
        
        
  24.         <input type="button" name="btnAddProfile" value="AddNew" onclick="insertStrProfile();" /> 
    25. 
        
        
        
        
  25.       div>td> 
    26. 
        
        
        
        
  26.       tr> 
    27. 
        
        
        
        
  27.   table>td> 
    28. 
        
        
        
        
  28. tr>
    29.

3.展示效果：

JavaScript中对dom的操作_第1张图片