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>