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>   

相关推荐