动态表格，留着复习动态添加元素

来源：互联网发布：企业宣传视频制作软件编辑：程序博客网时间：2024/06/08 14:27
</pre><pre name="code" class="javascript"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动态生成表格的创建</title><!--如果直接js放在这里，直接给按钮添加点击事件，就可能不会执行，因为在按照顺序，下面的button还没有创建所以添加之后没有用，解决方法可以将js放在后面，也可以写在window.onload里面， 它会在dom节点完成之后再执行--><script type="text/javascript">window.onload=function(){//得到按钮元素节点，添加一个点击事件var buttonElement = document.getElementById("add");buttonElement.onclick=function(){/** 目标格式： * <tr align=center height=35px><td>张三</td><td>18</td><td>打篮球</td><td><a href="delete?id=">删除</a></td>   </tr> *///得到要添加的值var nameValue = document.getElementById("name").value;var ageValue = document.getElementById("age").value;var hobbyValue = document.getElementById("hobby").value;//创建trvar trElement = document.createElement("tr");  //为tr添加属性trElement.setAttribute("align","center");trElement.setAttribute("height","35px");//创建tdvar tdNameElement = document.createElement("td");var tdAgeElement = document.createElement("td");var tdHobbyElement = document.createElement("td");var tdAElement = document.createElement("td");//创建文本节点var nameElement = document.createTextNode(nameValue);var ageElement = document.createTextNode(ageValue);var hobbyElement = document.createTextNode(hobbyValue);//为td添加文本节点tdNameElement.appendChild(nameElement);tdAgeElement.appendChild(ageElement);tdHobbyElement.appendChild(hobbyElement);  //添加a链接var aElement = document.createElement("a");aElement.setAttribute("href","delete?id="+nameValue);aElement.innerHTML="删除";    //给a链接添加点击事件，实现删除功能aElement.onclick=function(){var flag = window.confirm("您真的要删除【 "+nameValue+" 】这条数据吗？？");if(!flag){    //点击取消return false;   //使链接失效}/**--------删除功能-----------**///得到a这条数据的trvar deleteTr = this.parentNode.parentNode;//得到tbodyvar deleteTbody = this.parentNode.parentNode.parentNode;deleteTbody.removeChild(deleteTr);return false;    //使a链接的href失效}tdAElement.appendChild(aElement);//为tr添加td元素节点trElement.appendChild(tdNameElement);trElement.appendChild(tdAgeElement);trElement.appendChild(tdHobbyElement);trElement.appendChild(tdAElement);//为了兼容IE浏览器，添加tbody节点,并将tr添加到tbodyvar tbodyElement = document.createElement("tbody");tbodyElement.appendChild(trElement);//得到table元素,将tbody添加到tablevar tableElement = document.getElementById("usersInfo");tableElement.appendChild(tbodyElement);}//给重置按钮添加点击事件document.getElementById("clear").onclick=function(){clear();}}/** * 重置函数，清空输入框中的数据 */function clear(){document.getElementById("name").value="";document.getElementById("age").value="";hobbyValue = document.getElementById("hobby").value=""}</script></head><body><br/><br/><center>姓名：<input type="text" id="name" name="name"/> 年龄：<input type="text" id="age" name="age"/>爱好：<input type="text" id="hobby" name="hobby" /><br/><br/><input type="button" name="add" id="add" value="添加记录"/><input type="button" name="clear" id="clear" value="重置"/><br/><br/><table id="usersInfo" width=600px border=1px bordercolor=blue><!--为了兼容IE浏览器，添加一个tbody--><tbody><tr align=center height=40px><td style="font-color:red;">姓名</td><td>年龄</td><td>爱好</td><td>操作</td></tr></tbody></table></center></body></html>
效果图：
0 0