jquery增加和刪除行程式碼例項

admin發表於2017-02-20
jQuery行程
在實際引用中，有時候需要根據需要動態的增加或者刪除表格中的行，下面是一段相關程式碼例項，希望能夠給需要的朋友帶來幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
</head>
<body>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(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>

相關文章