search

Seasons123 / blog-FE

web前端相关issue is my blog :lollipop:
2 stars 0 forks source link

简单基础实例：jquery动态添加删除一行数据 #99

Closed Seasons123 closed 5 years ago

Seasons123 commented 5 years ago 
<html>
<head>
    <title>添加、删除一行</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/common/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#addOneRow").click(function() {
                var tempTr = $("tr:first").clone(true);
                $("tr:last").after(tempTr);
                $("tr:last > td > #name").val("");//新添加行name为空
                $("tr:last > td > #address").val("");//新添加行address为空
            });
            $(".delOneRow").click(function() {
                if ($("tr").length < 2) {
                    alert("至少保留一行!");
                } else {
                    if (confirm("确认删除?")) {
                        // $(this).parent().parent().remove();
                        $(this).parents("tr").remove();
                    }
                }
            });
        });
    </script>
</head>

<body>
<table border="1">
    <tr>
        <td>姓名:</td>
        <td><input type="text" id="name" name="name" />
        </td>
        <td>地址:</td>
        <td><input type="text" id="address" name="address" /></td>
        <td><input type="button" class="delOneRow" value="删除" /></td>
    </tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
</body>

</html>