方式二：
<meta charset="utf-8"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>利用jquery给指定的table添加一行、删除一行</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> 添加一行、删除一行封装方法/// /** * 为table指定行添加一行 * * tab 表id * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行 * trHtml 添加行的html代码 * */ function addTr(tab, row, trHtml){ //获取table最后一行 $("#tab tr:last") //获取table第一行 $("#tab tr").eq(0) //获取table倒数第二行 $("#tab tr").eq(-2) // var $tr=$("#"+tab+" tr").eq(row); //var $tr=$("#tab tr").eq(row); var tr=$("#tab tbody").eq(row); if(tr.size()==0){ alert("指定的table id或行数不存在！"); return; } tr.after(trHtml); } function delTr(ckb){ //获取选中的复选框，然后循环遍历删除 var ckbs=$("input[name="+ckb+"]:checked"); if(ckbs.size()==0){ alert("要删除指定行，需选中要删除的行！"); return; } ckbs.each(function(){ $(this).parent().parent().remove(); }); } /** * 全选 * * allCkb 全选复选框的id * items 复选框的name */ function allCheck(allCkb, items){ $("#"+allCkb).click(function(){ $('[name='+items+']:checkbox').attr("checked", this.checked ); }); } 添加一行、删除一行测试方法/// $(function(){ //全选 allCheck("allCkb", "ckb"); }); function addTr2(tab, row){ var trHtml="<tr align='center'><td><input type='checkbox' name='ckb'/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100px;' value='' placeholder='学生姓名'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100px;' value='' placeholder='登录密码'></td><td><input type='text' name='s[]3' class='ui-input met-center' style='width:100px;' value='' placeholder='QQ'></td><td><input type='text' name='s4[]' class='ui-input met-center' style='width:100px;' value='' placeholder='手机'></td><td><input type='text' name='s5[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人姓名'></td><td><input type='text' name='s6[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人联系方式'></td></tr>"; addTr(tab, row, trHtml); } function delTr2(){ delTr('ckb'); } </script> <form action="07.php" method="post"> <table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="100%"> <thead> <tr> <th width='50'></th> <th width='100'>学生姓名</th> <th width='100'>登录密码</th> <th width='100'>QQ</th> <th width='100'>手机</th> <th width='100'>监护人姓名</th> <th width='100'>监护人联系方式</th> </tr> </thead> <tbody> <!--<tr align="center"> <td width="30"></td> <td width="100">学生姓名</td> <td width="100">登录密码</td> <td width="100">QQ</td> <td width="100">手机</td> <td width="100">监护人姓名</td> <td width="100">监护人联系方式</td> </tr>--> </tbody> <tfoot> <tr> <th colspan='7' class='formsubmit'> <input type="button" οnclick="addTr2('tab', -1)" value="添加"><input type="button" οnclick="delTr2()" value="删除"> <input type="submit" name="button" id="button" value="提交"> </th> </tr> </tfoot> </table> </table> </form> </body> </html>