jQuery控制table进行添加和删除

最新推荐文章于 2021-01-08 12:31:37 发布

William.Y

最新推荐文章于 2021-01-08 12:31:37 发布

阅读量394

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/WiliamYao/article/details/78480008

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

    *{
          margin: 0;
           padding: 0;
       }
       table{
           text-align: center;
           margin: 15px auto;
       }
       td{
        width: 100px;
        height: 100px;
        text-align: center;
    }

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0" id="tab"> 
        <tr>

            <td>序号</td>
            <td>产品名称</td>
            <td>型号</td>
            <td>价格</td>
            <td>操作</td>

        </tr>
        <tr id="li">
            <td class="num">1</td>
            <td>ford</td>
            <td>focus</td>
            <td>10000</td>
            <td>
            <button id="add">添加</button>
            <button id="can">删除</button>
            </td>

        </tr>
    </table>

<script type="text/javascript">
        var n = 0;
        $(function(){
            var txt = $("#li").html();
            $(document).on("click","#add",function(){

                $("#tab").append("<tr>"+txt+"</tr>");
                fun();
            });

            $(document).on("click","#can",function(){

                $(this).parents('tr').remove();
                fun();
            });

            function fun(){

                 $(".num").each(function(n){  //遍历循环
                     $(this).html(n+1);
                 });     
            }
        });

    </script>