Welcome 微信登录

首页 / 操作系统 / Linux / JQuery实现动态增加和删除文本框

JQuery实现动态增加和删除文本框
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  5. <title>Untitled Document</title>  
  6. <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
  7. <mce:script type="text/javascript"><!--  
  8. $(function(){  
  9.  var i = 2;  
  10.  $("#addTextImput").click(function(){  
  11.   if(i < 100) {  
  12.    $("#main").append("<div><input type="text" name="text" + i + ""/><input type="button" id="del-text" value="删除"></div>");  
  13.    i++;  
  14.   } else {  
  15.    alert("最多加100个");  
  16.   }  
  17.     
  18.  });  
  19.  $(".del-text").live("click",function(){  
  20.  $(this).parent().remove();  
  21.  i--;  
  22.  });  
  23.  $("#del-text").live("click",function(){  
  24.  $(this).parent().remove();  
  25.  i--;  
  26.  });  
  27. });  
  28. // --></mce:script>  
  29. </head>  
  30. <body>  
  31. <div id="main">  
  32.  <div><input type="text" name="text1"/></div>  
  33. </div>  
  34.   
  35. <input  type="button" id="addTextImput" value="添加"/>  
  36. </body>  
  37. </html>