jQuery控制table進行添加和刪除

    *{
          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>