表格行增删功能实现-优快云博客

这个代码有个特点：通常情况下是用按键绑定一个函数。

但这个代码是用函数绑定一个按键。按键本身没有设定任何函数。

<!DOCTYPE html>
<html>

    <head>
        <title>添加、删除一行</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/JQ3.3.1.js"></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();
                        }
                    }
                });
            });
        </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>