rinald_未来往事

jQuery实现动态添加input框

WEB前端
jQuery实现动态增加input输入框
演示:http://fity.cn/demo/addinput/
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>JS实现动态增加input输入框</title>  
  6. <script src="../js/jquery.min.js"></script>  
  7. <script type="text/javascript">  
  8. function insertstep(){  
  9.   var count = $("#table tr").length-1;  
  10.   count++;  
  11.   $("#table").append('<tr><td id="zttd"><input type="text" name="category" style="width:85px;"/></td><td id="zttd"><input type="text" name="category" style="width:85px;"/></td><td id="zttd"><input type="text" name="category" style="width:85px;"/></td><td id="zttd"><select name="type" style="width:90px"><option value="1">新闻</option><option value="1">投票</option></select></td></tr>');  
  12.   return false;  
  13. }  
  14. </script>  
  15. </head>  
  16. <body    >  
  17.   
  18. <table id="table" border="0" cellspacing="0" class="table" style="width:650px !important">  
  19.   <tr>  
  20.   <td colspan="4" width="25%" id="tdbg"><b>配置发布框</b></td>  
  21.   </tr>  
  22.   <form action="topicadmin/addcate" method="post">  
  23.   <tr>  
  24.   <td id="zttd" style="width:85px"><b>Lable标签名:</b></td>  
  25.   <td id="zttd" style="width:85px"><b>Input名称:</b></td>  
  26.   <td id="zttd" style="width:85px"><b>Field名称:</b></td>  
  27.   <td id="zttd" style="width:85px"><b>发布类别:</b><a href="#" title="新增一行">++</a></td>  
  28.   </tr>  
  29.   <tr>  
  30.   <td id="zttd"><input type="text" name="category" style="width:85px;"/></td>  
  31.   <td id="zttd"><input type="text" name="category" style="width:85px;"/></td>  
  32.   <td id="zttd"><input type="text" name="category" style="width:85px;"/></td>  
  33.   <td id="zttd">  
  34.     <select name="type" style="width:90px">  
  35.       <option value="1">新闻</option>  
  36.       <option value="1">投票</option>  
  37.     </select>  
  38.   </td>  
  39.   </tr>  
  40.   </form>  
  41. </table>  
  42. <button class="btn btn-info">提交内容</button>  
  43. <!--作者:未来往事(http://fity.cn)-->  
  44. </body>  
  45. </html>  
原文作者:rinald
原文地址:http://fity.cn/post/476.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。