08-Dom操作表格
2015-10-08 15:50
330 查看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!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> </head> <body> <center> <br> <br> 添加用户: <br> <br> 姓名:<input type="text" name="name" id="name" /> email:<input type="text" name="email" id="email" /> 电话:<input type="text" name="tel" id="tel" /> <br/> <br> <button id="addUser"> 提交 </button> <br/> <br/> <hr> <br/> <br/> <table id="usertable" border="1" cellpadding="5" cellspacing="0"> <tbody> <tr> <th> 姓名 </th> <th> email </th> <th> 电话 </th> <th> </th> </tr> <tr> <td> Tom </td> <td> Tom@tom.com </td> <td> 12346 </td> <td> <a href="deleteEmp?id=Tom">Delete</a> </td> </tr> <tr> <td> Jerry </td> <td> Jerry@Jerry.com </td> <td> 12346 </td> <td> <a href="deleteEmp?id=Jerry">Delete</a> </td> </tr> </tbody> </table> </center> </body> <script language="JavaScript"> window.onload = function(){ document.getElementById("addUser").onclick = function(){ //获取文本框的值 var nameValue = document.getElementById("name").value; var emailValue = document.getElementById("email").value; var telValue = document.getElementById("tel").value; //创建td //创建nametd var nameTd = document.createElement("td"); var nameText = document.createTextNode(nameValue); nameTd.appendChild(nameText); //创建emailtd var emailTd = document.createElement("td"); var emailText = document.createTextNode(emailValue); emailTd.appendChild(emailText); //创建teltd var telTd = document.createElement("td"); var telText = document.createTextNode(telValue); telTd.appendChild(telText); //创建atd var aTd = document.createElement("td"); var aElement = document.createElement("a"); aElement.setAttribute("href", "deleteEmp?id=" + nameValue) var DeleteText = document.createTextNode("Delete"); aElement.appendChild(DeleteText); aTd.appendChild(aElement); //创建tr var trElement = document.createElement("tr"); //增加td到tr上 trElement.appendChild(nameTd); trElement.appendChild(emailTd); trElement.appendChild(telTd); trElement.appendChild(aTd); //增加tr到table上 var tableElement=document.getElementById("usertable"); //创建tbody var tbodyElement=document.createElement("tbody"); tbodyElement.appendChild(trElement); tableElement.appendChild(tbodyElement); //删除 aElement.onclick=function(){ //使网页连接失效 return delTr(aElement); } } } function delTr(aElement){ var name=aElement.parentNode.firstChild.firstChild.nodeValue; var flag=window.confirm("您确定要删除["+name+"]这个用户吗?"); if(!flag){ return false; } //删除 //获取tbody var tbodyElement=aElement.parentNode.parentNode.parentNode; //获取tr var trElement=aElement.parentNode.parentNode; //删除 tbodyElement.removeChild(trElement); return false; } </script> </html>
相关文章推荐
- 解决UnicodeEncodeError: 'ascii' codec can't encode characters in position问题
- ORACLE表空间管理维护
- 解决"the currently displayed page contains invalid values"
- 5233杨光--第三周实验报告
- 国庆节阿里喵街走红商场 互联网+激发零售新活力
- onActivityResult方法不执行的一个原因
- Phabricator入门手册
- 网络寻址1
- C++中break与continue的区别
- Java - Difference between Wait and Sleep , Yield in Java
- 时间戳转为C#格式时间
- sql server 2382端口问题
- 134. Gas Station (Array; DP)
- 设计模式--代理模式
- 排序--看一眼就忘不了
- 图片入库后应该做的
- java输出调试技巧及Eclipse快捷键使用方法
- HDU 4337 King Arthur's Knights 它输出一个哈密顿电路
- D3学习教程
- Java序列化的几种方式以及序列化的作用