jquery 表格的增行删行实现思路

在做后台中遇到的情况，分享下复制代码代码如下: <!DOCTYPE html> <html> <head> <title>表格增行，删行处理</title> <script type="text/javascript" src="http://jt.875.cn/js/jquery"></script> </head> <body> <script> $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值，这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").click(function(){ if(count < fin_count) //点击时候，如果当前的数字小于递增结束的条件 { $("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 $("tr:last td input:first").val(++count); //改变添加的行的ID值。 } }); }); function deltr(){ var length=$("tr").length; if(length<=2){ alert("至少保留一行"); }else{ $("tr:last").remove(); } } </script> <input type="button" id="btn_addtr" value="增行"> <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" align="center" bgcolor="#CCCCCC">ID</td> <td align="center" bgcolor="#CCCCCC">Username</td> <td align="center" bgcolor="#CCCCCC">Usertype</td> <td align="center" bgcolor="#CCCCCC">Other</td> <td></td> </tr> <tr> <div style="background:#ccc;"> <td height="30" align="center"><input type="text" size="2" value="1" /></td> <td align="center"><input type="text" name="username" /></td> <td align="center"> <select name="type"> <option value="1">Administrator</option> <option value="2">Guest</option> </select> </td> <td align="center"><input type="text" name="username2" /></td> <td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td> </div> </tr> </table> </body> </html>

　　推荐阅读

　　杨氏矩阵查找的JS代码

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http>>>详细阅读

本文标题：jquery 表格的增行删行实现思路

地址：http://www.17bianji.com/kaifa2/JS/22607.html

1/2 1