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

最新推荐文章于 2020-03-25 21:22:40 发布

一起学习前端吧

最新推荐文章于 2020-03-25 21:22:40 发布

阅读量1.9k

点赞数

分类专栏： javascript(JQuery)

本文链接：https://blog.csdn.net/sweetsoft/article/details/8261684

版权

javascript(JQuery) 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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>