基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<divstyle="width:720px;margin:20px auto;"><tableid="tab11"style="display: none"><tbody><tr><tdheight="30"align="center"><inputtype="text"name="NO"size="2"value="1"/></td><tdalign="center"><inputtype="text"name="start_end_time"/></td><tdalign="center"><inputtype="text"name="unit_department"/></td><tdalign="center"><inputtype="text"name="post"/></td><td><inputtype="button"id="Button1"onclick="deltr(this)"value="删行"/></td></tr></tbody></table><inputtype="button"id="btn_addtr"value="增行"/><tableid="dynamicTable"width="700"border="0"cellspacing="0"cellpadding="0"><thead><tr><tdheight="30"align="center"bgcolor="#CCCCCC">ID</td><tdalign="center"bgcolor="#CCCCCC">起止时间</td><tdalign="center"bgcolor="#CCCCCC">单位/部门</td><tdalign="center"bgcolor="#CCCCCC">职位</td><td></td></tr></thead><tbody><tr><tdheight="30"align="center"><inputtype="text"name="NO"size="2"value="1"/></td><tdalign="center"><inputtype="text"name="start_end_time"/></td><tdalign="center"><inputtype="text"name="unit_department"/></td><tdalign="center"><inputtype="text"name="post"/></td><td><inputtype="button"id="Button2"onclick="deltr(this)"value="删行"/></td></tr></tbody></table></div>
js代码：
$(function() {varshow_count = 20;//要显示的条数varcount = 1;//递增的开始值，这里是你的ID$("#btn_addtr").click(function() {varlength = $("#dynamicTable tbody tr").length;//alert(length);if(length < show_count)//点击时候，如果当前的数字小于递增结束的条件{
$("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");//在表格后面添加一行changeIndex();//更新行号}
});
});functionchangeIndex() {vari = 1;
$("#dynamicTable tbody tr").each(function() {//循环tab tbody下的tr$(this).find("input[name='NO']").val(i++);//更新行号});
}functiondeltr(opp) {varlength = $("#dynamicTable tbody tr").length;//alert(length);if(length <= 1) {
alert("至少保留一行");
}else{
$(opp).parent().parent().remove();//移除当前行changeIndex();
}
}
via：http://www.w2bc.com/article/jquery-add-row-form