WEB前端
No Comments

jQuery实现动态添加input框

jQuery实现动态增加input输入框
演示：https://www.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://www.fity.cn）-->  
  44. </body>  
  45. </html>  

本文最后更新于 2014-06-07 11:04:20 并被添加「js web前端技术 jquery」标签，已有 8237 位童鞋阅读过。
本文作者：未来往事
本文链接：https://felixway.cn/post/476.html
本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

相关文章

此处评论已关闭