DOM的增删改实例

梦里梦外; 2022-04-12 05:51 218阅读 0赞

**1.给出如下图，请利用DOM的增删改完成员工信息的删除以及添加**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
**2.具体代码如下：**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM删除练习</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    #employeeTable{
    	margin:50px auto;
    	border-spacing:0px;
        
    	
    }
    div{
    	width:298px;
    	margin:50px auto;
    	border:1px solid;
    	padding-left:20px;
    }
    h4{
    	padding:20px 0px;
    }
    div table{
    	padding-bottom:10px;
    }
    a{
    	text-decoration:none;
    }
    </style>
    <script type="text/javascript">
    function del()
    {
    
    		//因为点击超链接以后，超链接会跳转页面，这是超链接的默认行为，所以写成此形式<a href="javascript:;">，这样可以防止页面跳转也可以在删除后面写一个return false;
    		//点击超链接以后需要删除超链接所在的行
    		//获取当前a所在的行
    		var tr=this.parentNode.parentNode;//这里的this表示我们所点击的那个超链接
    		//获取当前要删除员工的名字
    		var name=tr.getElementsByTagName("td")[0].innerHTML;
    		var flag=confirm("确认要删除"+name+"吗");//confirm有返回值，确认为true和取消为false
    
    		if(flag)//如果点击确认则删除tr
    		tr.parentNode.removeChild(tr);
    		//return false;
    		
    		
    }
    window.onload=function()
    {
    //1.点击超链接以后删除一个员工信息
    //获取所有的超链接
    	var alla=document.getElementsByTagName("a");
    //为每一个超链接都绑定一个单击响应事件（遍历）
    	for(var i=0;i<alla.length;i++)
    	{
    		alla[i].onclick=del;
    		
    	}
    	//2.点击submit按钮后添加一个员工信息到表格中
    	//获取按钮
    	var btn=document.getElementById("addEmpButton");
    	//点击响应事件
    	btn.onclick=function()
    	{
    		//获取用户添加的员工信息（获取员工姓名）
    		var name=document.getElementById("empName").value;
    		//获取员工的邮箱
    		var email=document.getElementById("email").value;
    		//获取员工工资
    		var salary=document.getElementById("salary").value;
    		
    		//需要将获取到的信息保存到tr中
    		//创建一个tr
    		var tr=document.createElement("tr");
    		//设置tr里的内容
    		tr.innerHTML="<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>delete</a></td>";
    		//获取tr中的a
    		var a=tr.getElementsByTagName("a")[0];
    		//绑定单击响应函数
    		a.onclick=del;
    		//获取table
    		var employeeTb=document.getElementById("employeeTable");
    		//获取tbody
    		var tbody=employeeTb.getElementsByTagName("tbody")[0];
    		//将tr添加到table中
    		tbody.appendChild(tr);
    		};
    };
    </script>
    </head>
    <body>
    <table  id="employeeTable" border="1px">
    <tr>
    <th>Name</th>
    <th>Eamil</th>
    <th>Salary</th>
    <th> </th>
    </tr>
    <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
    <td>Jeery</td>
    <td>jeery@jerry.com</td>
    <td>8000</td>
    <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
    <td>Bob</td>
    <td>bob@bob.com</td>
    <td>10000</td>
    <td><a href="javascript:;">delete</a></td>
    </tr>
    </table>
    <div id="formDiv">
    <h4>添加新员工</h4>
    <table >
    <tr>
    <td class="word">name:</td>
    <td class="inp"><input type="text" name="empName" id="empName"/></td>
    </tr>
    <tr>
    <td class="word">email:</td>
    <td class="inp"><input type="text" name="email" id="email"/></td>
    </tr>
    <tr>
    <td class="word">salary:</td>
    <td class="inp"><input type="text" name="salary" id="salary"/></td>
    </tr>
    <tr>
    <td colspan="2" align="center"><button id="addEmpButton" value="abc">submit</button></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

**3.删除结果图**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]  
4.成功删除Tom信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]  
5.添加信息  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]  
6.说明：下面的这两句代码可以有另一种写法

//创建一个tr
    		var tr=document.createElement("tr");
    		//设置tr里的内容
    		tr.innerHTML="<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>delete</a></td>";
    		//获取table
    		var employeeTb=document.getElementById("employeeTable");
    		//获取tbody
    		var tbody=employeeTb.getElementsByTagName("tbody")[0];
    		//将tr添加到table中
    		tbody.appendChild(tr);

**附另一种写法**

//创建一个tr
    		var tr=document.createElement("tr");
    		//创建四个td
    		var nametd=document.createElement("td");
    		var emailtd=document.createElement("td");
    		var salarytd=document.createElement("td");
    		var atd=document.createElement("td");
    		//创建一个a
    		var a=document.createElement("a");
    		//创建文本结点
    		var nametext=document.createTextNode(name);
    		var emailtext=document.createTextNode(email);
    		var salarytext=document.createTextNode(salary);
    		var deltext=document.createTextNode("delete");
    		//将文本结点放到td中
    		nametd.appendChild(nametext);
    		emailtd.appendChild(emailtext);
    		salarytd.appendChild(salarytext);
    		a.appendChild(deltext);
    		atd.appendChild(a);
    		//将td放到tr中
    		tr.appendChild(nametd);
    		tr.appendChild(emailtd);
    		tr.appendChild(salarytd);
    		tr.appendChild(atd);
    		//获取table
    		var employeeTb=document.getElementById("employeeTable");
    		//获取tbody
    		var tbody=employeeTb.getElementsByTagName("tbody")[0];
    		//将tr添加到table中
    		tbody.appendChild(tr);

**作用是创建表格的一行（例如下面的例子）**

<tr>
    <td>Jeery</td>
    <td>jeery@jerry.com</td>
    <td>8000</td>
    <td><a href="javascript:;">delete</a></td>
    </tr>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220412/a5119870b15442de944c15bb0dcab4a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220412/7fd1cb6e15f44c91ba347cfa68446dd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]: /images/20220412/30867898195f4589b1ae1399e2f76eca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]: /images/20220412/d167955ac3654ae8b6e3f70c9497724c.png