<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于jQuery表格增加删除代码示例</title> <script type="text/javascript" src="./2.1.js"></script> <script type="text/javascript"> $(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) //点击时候，如果当前的数字小于递增结束的条件 { // alert($("#tab11 tbody tr").clone()); /** *clone([Even[,deepEven]]) * 概 述 * 克隆匹配的DOM元素并且选中这些克隆的副本。 * 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用 */ $("#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) { // alert($(opp).val()); // alert(opp); //jQuery 对象 var length = $("#dynamicTable tbody tr").length; //alert(length); if (length <= 1) { alert("至少保留一行"); } else { // alert($(opp).parent()); // alert($(opp).parent().parent()); // ========== 1 =========== // $(opp).remove();//移除当前行 删除当前的元素 input // <input type="button" id="Button2" onclick="deltr(this)" value="删行" /> //============ 2 ===================================================== // $(opp).parent().remove();//移除当前 td //<td><input type="button" id="Button1" onclick="deltr(this)" value="删行" /></td> //============ 3 =============================================================== $(opp).parent().parent().remove();//移除当前行 tr /** <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> */ changeIndex(); } } </script> </head> <body> <div style="720px;margin:20px auto;"> <!-- 作为隐藏 clone start --> <table id="tab11" style="display: none;border:0px solid red;"> <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> <!-- 作为隐藏 clone end--> <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> </body> </html>