js简单实现添加、删除记录

喵俺第一专栏

已于 2022-01-21 21:36:41 修改

阅读量1.1k

点赞数

分类专栏： # Html+css+js项目文章标签： javascript 开发语言 html5

于 2022-01-21 21:33:53 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/122629814

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

DOM增删改的方法：

appendChild（）把新的节点添加到指定的节点。

向一个父节点中添加一个新的子节点

用法：父节点.appendChild（子节点）；

removeChild（）删除子节点

语法：父节点.removChild（子节点）

replaceChild（）替换子节点

使用指定的子节点替换已有的节点

语法：父节点.replaceChilld（新节点，子节点）

insertBefore（）将指定的子节点前面插入新的子节点

在指定的子节点前插入新节点

语法：父节点.insertBefore（新节点，子节点）

createElement（）创建元素节点

可以创建一个元素节点对象，他需要一个标签名作为参数，将会根据该标签名创建一个节点对象，并将节点对象作为参数返回

语法：var li = document.createElement("li");

createTextNode（）创建文本节点

需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

例子：进行删除、添加信息，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
          删除tr的响应函数下面可以简单调用
        */
        function delA() {
            //点击超链接以后需要删除超链接所在的哪一行，这里我们点击那个超链接this就是谁
            //获取当前tr
            var tr = this.parentNode.parentNode;

            //获取员工的名字,第一种获取方法
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            //第二种
            // var name = tr.removeChild[0].innerHTML;

            //删除之前弹出提示框
            var flag = confirm("确认删除" + name + "吗？")//含有确认与取消按钮的提示框，需要字符串作为参数
            if (flag) {
                //删除tr
                tr.parentNode.removeChild(tr);
            }

            return false;//取消超链接的默认行为
        };
        window.onload = function () {
            //点击超链接以后，删除一个员工的信息
            //获取所有超链接
            var allA = document.getElementsByTagName("a");
            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = function () {
                    //点击超链接以后需要删除超链接所在的哪一行，这里我们点击那个超链接this就是谁
                    //获取当前tr
                    var tr = this.parentNode.parentNode;

                    //获取员工的名字,第一种获取方法
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    //第二种
                    // var name = tr.removeChild[0].innerHTML;

                    //删除之前弹出提示框
                    var flag = confirm("确认删除" + name + "吗？")//含有确认与取消按钮的提示框，需要字符串作为参数
                    if (flag) {
                        //删除tr
                        tr.parentNode.removeChild(tr);
                    }

                    return false;//取消超链接的默认行为
                };
            }
            //添加员工功能
            //点击按钮以后，将员工内的信息添加到表格中

            //为提交按钮绑定一个单击响应函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                //获取员工的名字
                var name = document.getElementById("empName").value;
                //获取员工的email
                var email = document.getElementById("email").value;
                //获取员工的salary
                var salary = document.getElementById("salary").value;
                //alert(name + email + salary);
                //需要将获取到的信息添加到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");
                //创建一个超链接
                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中添加文本
                a.appendChild(delText);
                //将a添加到td中
                aTd.appendChild(a);
                //将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd);

                //向a中添加href属性
                a.href = "javascript:;";

                //为新添加的a标签在绑定一次单击响应函数
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable中的tbody
                var tbody = document.getElementsByTagName("tbody")[0];

                //将tr添加到tbody
                tbody.appendChild(tr);


            };

        };
    </script>
</head>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Emial</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@sohu.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="empName">
                </td>
            </tr>
            <tr>
                <td class="word">emial:</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>

添加节点简写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
          删除tr的响应函数下面可以简单调用
        */
        function delA() {
            //点击超链接以后需要删除超链接所在的哪一行，这里我们点击那个超链接this就是谁
            //获取当前tr
            var tr = this.parentNode.parentNode;

            //获取员工的名字,第一种获取方法
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            //第二种
            // var name = tr.removeChild[0].innerHTML;

            //删除之前弹出提示框
            var flag = confirm("确认删除" + name + "吗？")//含有确认与取消按钮的提示框，需要字符串作为参数
            if (flag) {
                //删除tr
                tr.parentNode.removeChild(tr);
            }

            return false;//取消超链接的默认行为
        };
        window.onload = function () {
            //点击超链接以后，删除一个员工的信息
            //获取所有超链接
            var allA = document.getElementsByTagName("a");
            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = function () {
                    //点击超链接以后需要删除超链接所在的哪一行，这里我们点击那个超链接this就是谁
                    //获取当前tr
                    var tr = this.parentNode.parentNode;

                    //获取员工的名字,第一种获取方法
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    //第二种
                    // var name = tr.removeChild[0].innerHTML;

                    //删除之前弹出提示框
                    var flag = confirm("确认删除" + name + "吗？")//含有确认与取消按钮的提示框，需要字符串作为参数
                    if (flag) {
                        //删除tr
                        tr.parentNode.removeChild(tr);
                    }

                    return false;//取消超链接的默认行为
                };
            }
            //添加员工功能
            //点击按钮以后，将员工内的信息添加到表格中

            //为提交按钮绑定一个单击响应函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                //获取员工的名字
                var name = document.getElementById("empName").value;
                //获取员工的email
                var email = document.getElementById("email").value;
                //获取员工的salary
                var salary = document.getElementById("salary").value;
                //alert(name + email + salary);
                //需要将获取到的信息添加到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>"
                //获取刚刚添加的a元素，并为其绑定单击响应函数
                
                var a = tr.getElementsByTagName("a")[0];0000000
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable中的tbody
                var tbody = document.getElementsByTagName("tbody")[0];

                //将tr添加到tbody
                tbody.appendChild(tr);


            };

        };
    </script>
</head>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Emial</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@sohu.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="empName">
                </td>
            </tr>
            <tr>
                <td class="word">emial:</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>

结果：

喵俺第一专栏

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js简单实现添加、删除记录

DOM增删改的方法：appendChild（）把新的节点添加到指定的节点。向一个父节点中添加一个新的子节点用法：父节点.appendChild（子节点）；removeChild（）删除子节点语法：父节点.removChild（子节点）replaceChild（）替换子节点使用指定的子节点替换已有的节点语法：父节点.replaceChilld（新节点，子节点）insertBefore（）将指定的子节点前面插入新的子节点在指定的子节点...
复制链接

扫一扫