添加和删除记录——JS

最新推荐文章于 2022-10-24 19:17:50 发布

_洋

最新推荐文章于 2022-10-24 19:17:50 发布

阅读量327

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/mantou_riji/article/details/124016465

版权

HTML JavaScript 动态添加删除操作 confirm对话框

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
   <script>
    //    s删除的响应函数
       function deleA(){
                // 获取tr
                var tr = this.parentNode.parentNode;
                var name = tr.id;
                // 提示框
                /*confirm()用于弹出一个带有确认和取消按钮的提示框
                需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                点击确认返回true，否则返回false
                */
                if(confirm("确认删除"+name+"吗？"))
                // 删除 tr
                tr.parentNode.removeChild(tr);

                /*
                点击超链接以后，超链接会跳转页面,这个是超链接的默认行为，
                但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/
                return false;
            }
       window.onload = function(){
        //  获取所有超链接
        var allA = document.getElementsByTagName("a");
        // 设置删除属性
        for( var i =0; i < allA.length; i++ ){
            allA[i].onclick = deleA;
        }


        // 添加员工
        var add = document.getElementById("addEmpButton");
        add.onclick = function(){
            // 获取员工信息
            var name = document.getElementsByName("empName")[0].value;
            var email = document.getElementById("empEmail").value;
            var salary = document.getElementById("empSalary").value;
            // alert(name+","+email+","+salary);

            // 添加元素
            var tr = document.createElement("tr"); 

            var nameTd = document.createElement("td");
            var emailTd = document.createElement("td");
            var salaryTd = document.createElement("td");
            var aTd = document.createElement("td");

            var a =document.createElement("a");
            a.href="javascript:;";
            // 绑定删除响应函数
            a.onclick = deleA;
            
            var nameText = document.createTextNode(name);
            var emailText = document.createTextNode(email);
            var salaryText = document.createTextNode(salary);
            var aText = document.createTextNode("Delete");

            nameTd.appendChild(nameText);
            emailTd.appendChild(emailText);
            salaryTd.appendChild(salaryText);
            a.appendChild(aText);
            aTd.appendChild(a);

            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(salaryTd);
            tr.appendChild(aTd);

            // 获取Table
            var table = document.getElementById("employeeTable");
            // 在网页代码中发现tr是在tbody下而不是直接在table下，所以我们获取tbody
            var tbody  = table.getElementsByTagName("tbody")[0];

            tbody.appendChild(tr);

        }   
    
    }

   </script>
</head>
<body>
    <table id ="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr id = "Tom">
            <td>Tom</td>
            <td>TOM@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001" >Delete</a></td>
        </tr>
        <tr id = "Jerry">
            <td>Jerry</td>
            <td>Jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr id ="Bob">
            <td>Bob</td>
            <td>Bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">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 = "empId">
            </td>
            </tr>
             <tr>
            <td class = "word">Email:</td>
            <td class = "inp">
                <input type="text" name = "empEmail" id = "empEmail">
            </td>
            </tr>
        
             <tr>
            <td class = "word">Salary:</td>
            <td class = "inp">
                <input type="text" name = "empSalary" id = "empSalary">
            </td>
            </tr>

             <tr>
            <td colspan="2" align="center">
                <button id = "addEmpButton" value="abc">提交</button>
            </td>
            </tr>
        </table>
    </div>

    
</body>
</html>

结合innerHTML将进行改进
：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
   <script>
    //    s删除的响应函数
       function deleA(){
                // 获取tr
                var tr = this.parentNode.parentNode;
                var name = tr.id;
                // 提示框
                /*confirm()用于弹出一个带有确认和取消按钮的提示框
                需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                点击确认返回true，否则返回false
                */
                if(confirm("确认删除"+name+"吗？"))
                // 删除 tr
                tr.parentNode.removeChild(tr);

                /*
                点击超链接以后，超链接会跳转页面,这个是超链接的默认行为，
                但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/
                return false;
            }
       window.onload = function(){
        //  获取所有超链接
        var allA = document.getElementsByTagName("a");
        // 设置删除属性
        for( var i =0; i < allA.length; i++ ){
            allA[i].onclick = deleA;
        }


        // 添加员工
        var add = document.getElementById("addEmpButton");
        add.onclick = function(){
            // 获取员工信息
            var name = document.getElementsByName("empName")[0].value;
            var email = document.getElementById("empEmail").value;
            var salary = document.getElementById("empSalary").value;
            // alert(name+","+email+","+salary);

            // 添加元素
            var tr = document.createElement("tr"); 
            tr.innerHTML = "<td>"+name+"</td>"+
                            "<td>"+email+"</td>"+
                            "<td>"+salary+"</td>"+
                            "<td><a href ='javascript:;'>Delete</a></td>";
            var a =tr.getElementsByTagName("a")[0];
            a.onclick = deleA;



            
            // 获取Table
            var table = document.getElementById("employeeTable");
            // 在网页代码中发现tr是在tbody下而不是直接在table下，所以我们获取tbody
            var tbody  = table.getElementsByTagName("tbody")[0];

            // 保留最后一个插入的函数，才能保证不是所有的元素都被替换
            tbody.appendChild(tr);

        }   
    
    }

   </script>
</head>
<body>
    <table id ="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr id = "Tom">
            <td>Tom</td>
            <td>TOM@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001" >Delete</a></td>
        </tr>
        <tr id = "Jerry">
            <td>Jerry</td>
            <td>Jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr id ="Bob">
            <td>Bob</td>
            <td>Bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">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 = "empId">
            </td>
            </tr>
             <tr>
            <td class = "word">Email:</td>
            <td class = "inp">
                <input type="text" name = "empEmail" id = "empEmail">
            </td>
            </tr>
        
             <tr>
            <td class = "word">Salary:</td>
            <td class = "inp">
                <input type="text" name = "empSalary" id = "empSalary">
            </td>
            </tr>

             <tr>
            <td colspan="2" align="center">
                <button id = "addEmpButton" value="abc">提交</button>
            </td>
            </tr>
        </table>
    </div>

    
</body>
</html>

一个需要注意的问题：
在为a绑定响应函数的时候，由于有多个a标签需要绑定响应函数，所以需要使用for循环进行嵌套。但是注意for循环和响应函数的执行时间是不一样的，当页面一加载完for循环就立即执行，执行完毕后 i= allA.length,而响应函数是寺庵集的时候在执行，所以如果在响应函数中调用 i 的时候， i 的结果一定是allA.length，而不是从0开始的 i 。

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
添加和删除记录——JS

效果：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <script> // s删除的响应函数 function deleA(){ // 获取tr var tr = this.parentNode.parentNode; var n
复制链接

扫一扫