jQuery控制table进行添加和删除

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

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