js基础——DOM增删改练习

最新推荐文章于 2021-07-01 08:59:12 发布

jwz934738949

最新推荐文章于 2021-07-01 08:59:12 发布

阅读量539

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100406245

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM增删改练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table, th, td {
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 20px auto;
            text-align: center;
        }

        th, td {
            width: 100px;
            height: 35px;
        }

        div {
            margin: 30px auto;
            width: 428px;
            height: 200px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
    <script>

        window.onload = function () {
            function Delete() {
                var tr = this.parentNode.parentNode;
                var name = tr.firstElementChild;
                var f = confirm("是否删除姓名为" + name.innerHTML + "的信息？");
                if (f) {
                    tr.parentNode.removeChild(tr);
                }
            }

            var a = document.getElementsByTagName("a");
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = Delete;
            }

            var submit = document.getElementById("submit");
            submit.onclick = function () {
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href='javascript:'>Delete</a></td>";
                var tbody = document.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr);
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = Delete;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>Tom@123.com</td>
        <td>4300</td>
        <td><a href="javascript:">Delete</a></td>
    </tr>
    <tr>
        <td>Anne</td>
        <td>Anne@123.com</td>
        <td>7500</td>
        <td><a href="javascript:">Delete</a></td>
    </tr>
    <tr>
        <td>Jenny</td>
        <td>Jenny@123.com</td>
        <td>12000</td>
        <td><a href="javascript:">Delete</a></td>
    </tr>
</table>
<div>
    <h2>添加新员工</h2>
    <p>Name: </p><input type="text" id="name">
    <p>Email: </p><input type="text" id="email">
    <p>Salary: </p><input type="text" id="salary"><br>
    <button id="submit">Submit</button>
</div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——DOM增删改练习

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM增删改练习</title&gt...
复制链接

扫一扫