简单的表格动态添加、删除（无验证）

最新推荐文章于 2023-08-31 16:44:35 发布

少女与飞剑

最新推荐文章于 2023-08-31 16:44:35 发布

阅读量151

点赞数

分类专栏： learnWeb

本文链接：https://blog.csdn.net/qq_43738771/article/details/105950957

版权

learnWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考资料

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.5.0.js"></script>
    <style>
        div{
            border:solid 1px;
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            height: 200px;
        }
        table#table01{
            margin-left: auto;
            margin-right: auto;
            border: solid 1px;
            border-collapse: collapse;
            text-align: center;
            width:400px;
        }
        table#table01 th,table#table01 td{
            border: 1px solid;
        }
        #formTable{
            text-align: center;
        }
    </style>
    <script>
        //删除信息
        function deleteEmp() {
            var $trObj = $(this).parent().parent();
            var name = $trObj.find("td:first").text();
            if (confirm("确定要删除["+name+"]吗？")) {
                $trObj.remove();
            }
            return false;
        }
        //添加信息
        $(function() {
            $("#submit").click(function () {
                var name = $("#name").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                var $trObj = $("<tr>" +
                            "<td>"+name+"</td>" +
                            "<td>"+email+"</td>" +
                            "<td>"+salary+"</td>\n" +
                            "<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
                            "</tr>");
                $trObj.appendTo($("#table01"));

                $trObj.find("a").click(deleteEmp);
            });

            $("a").click(deleteEmp);
        });
    </script>
</head>
<body>
    <table id="table01">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></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@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
    </table><br/>
    <div>
        <h3>添加新员工</h3>
        <table id="formTable" align="center">
            <tr>
                <td>name:</td>
                <td><input type="text" id="name"/></td>
            </tr>
            <tr>
                <td>email:</td>
                <td><input type="email" id="email"/></td>
            </tr>
            <tr>
                <td>salary:</td>
                <td><input type="number" id="salary"/></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" id="submit"/></td>
            </tr>
        </table>
    </div>
</body>
</html>

少女与飞剑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的表格动态添加、删除（无验证）

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-3.5.0.js"></s...
复制链接

扫一扫