08-Dom操作表格

最新推荐文章于 2024-07-05 14:21:58 发布

会编程的阿强

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量350

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/48973519

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<%@ 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.οnclick=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>