jQuery控制table进行添加和删除

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