本章节分享一段代码实例,它实现了html元素的动态添加或者删除效果。
代码是由原生javascript实现的,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</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>
html元素的动态添加和删除代码实例,这样的场景在实际项目中还是用的比较多的,关于html元素的动态添加和删除代码实例就介绍到这了。
html元素的动态添加和删除代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98420.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: 浅谈原生JS中的延迟脚本和异步脚本
下一篇: jQuery 循环遍历改变a标签的href(实例讲解)