JavaScript增删改查练习(将人员信息可以添加到表格中也可以进行删减)

将人员信息可以添加到表格中也可以进行删减

html代码:

    <table style="margin:100px 100px 30px 100px" border="3" id="employeeTable">
        <tr>
            <th style="text-align: center;">Name</th>
            <th style="text-align: center;">Email</th>
            <th style="text-align: center;">Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>11@qq.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delate</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>13@qq.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=001">Delate</a></td>
        </tr>        
        <tr>
            <td>Bob</td>
            <td>14@qq.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=001">Delate</a></td>
        </tr> 
    </table>
    <div id="formDiv" >

        <h2>&nbsp;&nbsp;&nbsp;&nbsp;添加新员工</h2>

        <table style="margin:10px 100px 30px 100px">
            <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 style="colspan:2;text-align: center" >
                    <button id="addEmpButton" >Submit</button>
                </td>
            </tr>
        </table>
    </div>

css样式:

    <style>
        th{width:100px; height: 50px;}
        td{text-align: center;}
        tr{height: 40px;}
    </style>

简单呈现效果:
在这里插入图片描述

  • 创建删除delate响应函数,整个项目都可以用
//删除delate响应函数
 function delA(){
     //点击超链接后,需要删除超链接所在的那一行
     //获取当前tr
     var tr = this.parentNode.parentNode;
     //获取删除员工的名字
     var name = tr.getElementsByTagName("td")[0].innerHTML;
     //或
     //var name = tr.children[0].innerHTML;
     //confirm()带有确认和取消按钮的弹窗,点确认返回true,取消返回false
     var bool = confirm("确认要删除" + name +"嘛?");
     if(bool == true){
         //删除tr
         tr.parentNode.removeChild(tr);                        
     };
     //点击超链接后,超链接会跳转页面,这是超链接的默认行为
     //但此hi我们不希望出现默认行为,可以通过在相应函数的最后return false来取消默认行为
     return false;
 };

以下程序在这里面运行
window.onload = function(){};

1.点击一个超链接后,删除一个员工的信息

//获取所有的超链接
var allA = document.getElementsByTagName("a");
//为每个超链接绑定一个单击相应事件
for(var i = 0; i<allA.length; i++){ 
    allA[i].onclick = delA;
}

2.添加员工,点击按钮将员工的信息添加到表格中

//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
    //获取用户添加的员工信息
    //获取员工名字,Email,Salary
		var name = document.getElementById("empName").value;
		var Email = document.getElementById("email").value;
		var Salary = document.getElementById("Salary").value;
		
		
		//创建一个tr
		var tr = document.createElement("tr");
		//设置tr中的内容
		tr.innerHTML = "<td>" + name + "</td>"+
		"<td>" + Email + "</td>"+
		"<td>" + Salary + "</td>"+
		"<td><a href='deleteEmp?id=001'>Delate</a></td>";
		
		var a = tr.getElementsByTagName("a")[0];
		a.onclick = delA;
		//获取table 
		var employeeTable = document.getElementById("employeeTable");
		//获取employeeTable中的tbody
		var tbody = employeeTable.getElementsByTagName("tbody")[0];
		//将tr添加到tbody中
		tbody.appendChild(tr);
};

效果如下:
在这里插入图片描述
新添加进来的人员也可以进行删除

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页