JQuery页面可增删表格

        

          遇到一个新的需求，要求在页面上可以增加和删除表格，记得在jQuery中有类似的东西，自己借鉴了下，下面是代码。

html代码：

<span style="font-family:Verdana;font-size:14px;"> <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序号</td>
<td >课程名称</td>
<td>任课教师|</td>
<td>教师编号</td>
<td>操作</td>
</tr>
</table>

<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增?加¨®"/>
</div>
</span>

js代码：
<span style="font-family:Verdana;font-size:14px;"><script type="text/javascript">
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");

//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
$("#tab").append("<tr id="+_len+" align='center'>"
+ "<td>" + _len + "</td>"
+ "<td><input type='text' name='coursename" + _len + "' id='desc" + _len + "' /></td>"
+ "<td><input type='text' name='coursecode" + _len + "' id='desc" + _len + "' /></td>"
+"<td><input type='text' name='teachercode"+_len+"' id='desc"+_len+"' /></td>"
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删¦?除y</a></td>"
+"</tr>");
})
})

//删除<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
for(var i=index+1,j=_len;i<j;i++)
{
var nextTxtVal = $("#desc"+i).val();
$("tr[id=\'"+i+"\']")
.replaceWith("<tr id="+(i-1)+" align='center'>"
+ "<td>" + (i - 1) + "</td>"
+ "<td><input type='text' name='coursename" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
+ "<td><input type='text' name='coursecode" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
+"<td><input type='text' name='teachercode"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
+"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删¦?除y</a></td>"
+"</tr>");
}

}
</script>
</span>

效果图：