js 动态增加行删除行

时间：2014-05-09 08:23:27 收藏：0 阅读：342
 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>
js 动态增加行删除行,布布扣,bubuko.com