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>