网页表格的添加和删除不需要数据库Jquery

最新推荐文章于 2022-05-10 21:43:21 发布

Honey_fag

最新推荐文章于 2022-05-10 21:43:21 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/Honey_fag/article/details/77865525

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>

    <script>

        $(document).ready(function () {

            $("#checkbox").click(function () {

                $("input[type='checkbox']").attr("checked","true");

            });

            $("#add").click(function () {

                var name= $("#name").val();
                var pass=$("#pass").val();
                var email =$("#email").val();


                var row="<tr>"
                    +"<td><input type='checkbox'></td>"
                    +"<td>"+name+"</td>"
                    +"<td>"+pass+"</td>"
                    +"<td>"+email+"</td>"
                    +"<td><a>删除</a></td>"
                    +"</tr>";

                $("#table").append(row);

                $("a").click(function () {

                    $(this).parent().parent().remove();

                })

            })

        })

    </script>
</head>
<body>

    用户:&nbsp;&nbsp;<input type="text" name="name" id="name">&nbsp;&nbsp;
    密码:&nbsp;&nbsp;<input type="text" name="pass" id="pass">&nbsp;&nbsp;
    邮箱:&nbsp;&nbsp;<input type="text" name="email" id="email">&nbsp;&nbsp;
    <button id="add">添加</button><br>




<table style="background: yellow" id="table">
    <tr>
        <td><input type="checkbox"  id="checkbox"></td>
        <td>用户名</td>
        <td>密码</td>
        <td>邮箱</td>
        <td>操作</td>
    </tr>
</table>



</body>

Honey_fag

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页表格的添加和删除不需要数据库Jquery

html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="jquery-3.2.1.js">script> script> $(document).ready(function () { $("#chec
复制链接

扫一扫