首页 / 脚本样式 / JavaScript / jquery动态增加删减表格行特效

具体代码如下：
html代码：

<div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30" align="center"> <input type="text" name="NO" size="2" value="1" /> </td> <td align="center"> <input type="text" name="start_end_time" /> </td> <td align="center"> <input type="text" name="unit_department" /> </td> <td align="center"> <input type="text" name="post" /> </td> <td> <input type="button" id="Button1" onclick="deltr（this）" value="删行" /> </td> </tr> </tbody> </table> <input type="button" id="btn_addtr" value="增行" /> <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <td height="30" align="center" bgcolor="#CCCCCC">ID</td> <td align="center" bgcolor="#CCCCCC">起止时间</td> <td align="center" bgcolor="#CCCCCC">单位/部门</td> <td align="center" bgcolor="#CCCCCC">职位</td> <td></td> </tr> </thead> <tbody> <tr> <td height="30" align="center"> <input type="text" name="NO" size="2" value="1" /> </td> <td align="center"> <input type="text" name="start_end_time" /> </td> <td align="center"> <input type="text" name="unit_department" /> </td> <td align="center"> <input type="text" name="post" /> </td> <td> <input type="button" id="Button2" onclick="deltr（this）" value="删行" /> </td> </tr> </tbody> </table> </div>

$（function （） {var show_count = 20;//要显示的条数var count = 1;//递增的开始值，这里是你的ID$（"#btn_addtr"）.click（function （） { var length = $（"#dynamicTable tbody tr"）.length;//alert（length）;if （length < show_count）//点击时候，如果当前的数字小于递增结束的条件{$（"#tab11 tbody tr"）.clone（）.appendTo（"#dynamicTable tbody"）;//在表格后面添加一行changeIndex（）;//更新行号}}）;}）;function changeIndex（） {var i = 1;$（"#dynamicTable tbody tr"）.each（function （） { //循环tab tbody下的tr$（this）.find（"input[name="NO"]"）.val（i++）;//更新行号}）;} function deltr（opp） {var length = $（"#dynamicTable tbody tr"）.length;//alert（length）;if （length <= 1） {alert（"至少保留一行"）;} else {$（opp）.parent（）.parent（）.remove（）;//移除当前行changeIndex（）;}}