JQuery动态为表格(Table)添加和删除行

时间：2022-12-08 15:56:01
JQuery动态为表格(Table)添加和删除行
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                var btndel = $("<input type='button' value='x'/>"); //创建删除按钮
                btndel.click(function () { //为删除按钮添加删除功能
                    $(this).parent().parent().remove();
                });
                var td = $("<td><input type='file'/></td>"); //创建td对象
                td.append(btndel); //将按钮添加到td中
                var tr = $("<tr></tr>");  //创建tr
                tr.append(td);
                $("#t1").append(tr);
            });
        });

    </script>
</head>
<body>
    <table id="t1"></table><button id="btn1">add row</button>
</body>
</html>

标签：

相关文章