js添加删除数据记录

最新推荐文章于 2024-01-11 11:42:42 发布

407指导员

最新推荐文章于 2024-01-11 11:42:42 发布

阅读量228

点赞数 1

分类专栏： # DOM 文章标签： js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109441427

版权

DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

js添加删除数据记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/javascript" charset=UTF-8">
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="ex_2_style/css.css"/>
    <script type="text/javascript">
        //重复函数提出来当全局函数。
        function remove() {
            /**
             *点击超链接后需要删除超链接所在行
             * 就是删除父亲节点td的父亲节点tr
             * 每次绑定时，this标签都会指定当前的a标签
             */
            let tr = this.parentNode.parentNode;
            /**
             * 删除前提示一下是否确认删除，减少误删除
             * alert()肯定不行，只能确认
             * confirm（）方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
             *      -返回值true/false 如果确认则返回true,否则false
             * 最好让用户看到自己删除了哪个员工,tr元素的首个子节点就是name
             */
                //var name = tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;
            let con = confirm("确定删除" + name + "？");
            if (con) {
                tr.parentNode.removeChild(tr);
                alert("你已经删除" + name + "成功");
            } else {
                alert("你删除" + name + "失败!");
            }

            return false;
        }
        window.onload = function () {
            //点击超链接以后，删除一个员工信息
            //获取所有超链接
            let allA = document.getElementsByTagName("a");
            //为每个超链接绑定一个单击响应函数
            for (let i = 0; i < allA.length; i++) {
                allA[i].onclick = remove;

            }

            /**
             * 添加员工的功能
             *      -点击按钮后将员工信息添加到表格中
             */
                //给提交按钮绑定一个点击响应函数
            let addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                //获取用户添加的员工信息
                //获取员工名字,输入框里边的内容就是，输入框得value值
                let name = document.getElementById("empName").value;
                //获取员工的email信息
                let email = document.getElementById("email").value;
                //获取员工的salary信息
                let salary = document.getElementById("salary").value;


                //创建新的一行用来保存员工信息
                //创建一个tr元素
                let tr = document.createElement("tr");
                /**
                 *下边添加的文本节点，我是使用的是innerHTML而没有使用creatTextNode方法
                 * 区别:
                 * creatTextNode会将内容当成文本
                 * 如果文本中有html标签，原样显示，如<b>你好</b>
                 * 就会显示<b>你好</b>
                 * innerHTML则会将内容当成HTML代码处理
                 * 如果文本中有html标签，解析HTML代码，如<b>你好</b>
                 * 就会显示加粗的"你好"
                 * 如果文本中没有HTML代码,可以直接使用innerHTML
                 * 如果不能确定建议使用creatTextNode
                 */
                    //创建三个td元素,分别把 name email salary delete属性放进去
                let tdName = document.createElement("td");
                tdName.innerHTML = name;
                tr.appendChild(tdName);

                let tdEmail = document.createElement("td");
                tdEmail.innerHTML = email;
                tr.appendChild(tdEmail);

                let tdSalary = document.createElement("td");
                tdSalary.innerHTML = salary;
                tr.appendChild(tdSalary);

                let tdA = document.createElement("td");
                //创建删除超链接
                let a = document.createElement("a");
                //为新添加的a再次绑定单击响应函数
                a.onclick =remove;
                a.innerHTML = "Delete";
                //将超链接加入td中
                tdA.appendChild(a);
                //设置超链接的href属性
                a.setAttribute("href", "#");
                //将tdA加入tr
                tr.appendChild(tdA);

                /*   与上边代码等价且更方便
                let tdA = document.createElement("td");
                tdA.innerHTML = "<a href=\"#\">Delete</a>";
                 tr.appendChild(tdA);
                 */

                //获取员工信息表格table的 id
                let table = document.getElementById("employeeTable");
                //获取table元素，放进去
                let 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>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="#">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.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="empName1" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email2" id="email" value=""/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary3" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>

</body>
</html>

效果图

在这里插入图片描述

注意点

1.creatTextNode和innerHTML区别

2.共用函数提出成为全局函数。

3,添加新元素a后要再次绑定单击响应函数。

for (let i = 0; i < allA.length; i++) {
allA[i].onclick = remove;
}

4.上边代码中，为每个超链接绑定一个单击响应函数在浏览器运行时时，先执行for循环，当响应函数执行时，是页面加载完成后才会点击，这个时候for循环里边的i已经退出，值为3，所以在remove函数里的this，不能用allA[i]代替，因为它一直是allA[3],超出边界，undefined.

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js添加删除数据记录

js添加删除数据记录<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/javascript" charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="ex_2_style/
复制链接

扫一扫

专栏目录