JS基础-添加删除记录(复杂版)

最新推荐文章于 2023-07-20 10:11:30 发布

linqunbin

最新推荐文章于 2023-07-20 10:11:30 发布

阅读量253

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90695533

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">

        // 删除tr的响应函数
        function delA(){
            // 点击超链接后,删除超链接所在那一行.
            // 这里点击那个超链接this就是谁.
            // 获取当前的tr
            var tr = this.parentNode.parentNode;

            // 获取要删除的人名,以下两种方式都可以.
            // var name = tr.getElementsByTagName('td')[0].innerText;
            var name = tr.children[0].innerHTML;

            // 删除之前弹出一个提示框
            /*
                confirm()用于弹出一个带有确认和取消按钮的提示框
                需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                如果用户点击确认则会返回true,如果点击取消则返回false
            */
            var flag = confirm('确定删除' + '"' + name + '"' + '吗?');
            if (flag) {
                // 删除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 = delA;
            };
            /*
                添加员工信息
                点击按钮以后,将员工的信息添加表格中.
            */
            // 为提交按钮添加单击函数
            var addEmpButton = document.getElementById('addEmpButton');
            addEmpButton.onclick = function(){
                
                // 获取用户填写的员工信息
                var name = document.getElementById('empName').value;
                var email = document.getElementById('email').value;
                var salary = document.getElementById('salary').value;
                /*
                    需要将获取的信息表寸到tr里
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="deleteEmp?id=002">Delete</a></td>
                    </tr>
                */
                // 创建tr
                var tr = document.createElement('tr');
                // 创建4个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');
                // 向a中添加href属性
                a.href = 'javascript:;'
                // 为新添加的a再绑定一次单击响应函数,否则新添加的记录删除不了
                a.onclick = delA;
                
                // 创建文本节点
                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);

                // 获取table
                var employeeTable = document.getElementById('employeeTable');
                // 获取table中的tbody(tbody是游览器自动添加的,要把tr放到tbody中)
                // 否则添加的tr不会在tbody里.
                var tbody = employeeTable.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>
            <!-- href='javascript:; 可以防止点击超级链接后,出现页面跳转 -->
            <td><a href="deleteEmp?id001">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>18000</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">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>

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础-添加删除记录(复杂版)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫