您的位置：首页 > Web前端 > JQuery

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

2012-12-05 18:16 453 查看 

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航