1 <body> 2 <table id="tableID" border="1" align="center" width="60%"> 3 <tr> 4 <th>用户名</th> 5 <th>邮箱</th> 6 <th>操作</th> 7 </tr> 8 <tbody id="tbodyID"> 9 <!-- 动态增加行 10 <tr> 11 <td>用户名</td> 12 <td>邮箱</td> 13 <td><input/></td> 14 </tr> 15 --> 16 </tbody> 17 </table> 18 <hr/> 19 用户名：<input type="text" id="usernameID"/> 20 邮箱： <input type="text" id="emailID"/> 21 <input type="button" value="增加" id="addID"/> 22 </body> 23 <script type="text/javascript"> 24 //动态增加和删除表格行的内容 25 document.getElementById("addID").onclick=function(){ 26 //获取用户名和邮箱 27 var username = document.getElementById("usernameID").value; 28 var email = document.getElementById("emailID").value; 29 //判断 30 if(username!=null && email!=null){ 31 //创建tr元素 32 var trElemnet = document.createElement("tr"); 33 //创建td元素 34 var td1Element = document.createElement("td"); 35 var td2Element = document.createElement("td"); 36 var td3Element = document.createElement("td"); 37 //将用户名和邮箱添加到td元素 38 td1Element.innerHTML = username; 39 td2Element.innerHTML = email; 40 //创建按钮 41 var delElement = document.createElement("input"); 42 delElement.type="button"; 43 delElement.value="删除"; 44 //为按钮添加单击事件 45 delElement.onclick=function(){ 46 //删除按钮所在的tr对象 47 trElemnet.parentNode.removeChild(trElemnet); 48 } 49 td3Element.appendChild(delElement); 50 //将td元素添加到tr元素中 51 trElemnet.appendChild(td1Element); 52 trElemnet.appendChild(td2Element); 53 trElemnet.appendChild(td3Element); 54 //将tr元素添加到tbody元素中 55 document.getElementById("tbodyID").appendChild(trElemnet); 56 //清空文本框中的值 57 document.getElementById("usernameID").value=""; 58 document.getElementById("emailID").value=""; 59 }else{ 60 window.alert("用户名和密码必填"); 61 } 62 } 63 </script>