动态的增加和删除元素在很多地方都需要用到,比如有时候需要大量数据收集的时候,我们就需要动态增加form表单等。下面是一个例子:
效果演示
添加新的用户名 | |
用户信息 |
JavaScript代码
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <title>DOM-动态添加和删除元素</title> <style type="text/css"> body,td,caption,input{ font-size:12px; } .test { border-collapse:collapse; } .test td { border:1px solid #ccc; line-height:150%; } </style> <script language="javascript"> var count = 0; //添加新用户的操作 function addNewUser() { //得到文本框对象 var objName = document.getElementById('name'); if(objName.value=="") { alert("用户名不能为空!"); objName.focus(); return; } else { count++; //先创建行tr var row = document.createElement("tr"); //设置行对象的ID属性为用户输入的用户名称 row.setAttribute("id",objName.value+count); //创建td对象 var column = document.createElement("td"); //td对象下添加子节点 - 内容 TextNode 对象 column.appendChild(document.createTextNode(objName.value)); //row对象将td对象添加为子节点对象 row.appendChild(column); //再创建删除按钮 var delBtn = document.createElement("input"); //类型 delBtn.setAttribute("type","button"); //文本 delBtn.setAttribute("value","Delete"); //设置对象的事件处理 - 所调用的函数 var name = objName.value+count; delBtn.onclick= function(){delUser(name);}; column = document.createElement("td"); column.appendChild(delBtn); //行对象添加 row.appendChild(column); //添加这一行到tbody中 document.getElementById('userList').appendChild(row); objName.value=""; } } //删除元素 function delUser(name) { if(name!=null) { var objRow = document.getElementById(name); var objTBODY = document.getElementById("userList"); //删除 objTBODY.removeChild(objRow); } } </script> </head> <body> <table align="center" width="40%" cellspacing="0" class="test"> <caption align="center">动态添加用户</caption> <tr> <td>添加新的用户名</td> <td><input type="text" id="name"> <input type="button" value="添 加" onClick="addNewUser()"></td> </tr> <tr> <td colspan="2">用户信息</td> </tr> <!--表格主体--> <tbody id="userList"></tbody> </table> </body> </html>
本文地址:http://www.nowamagic.net/librarys/veda/detail/447,欢迎访问原出处。
大家都在看