如何在按钮单击时添加动态文本字段答案

【问题标题】：how do add dynamic textfield on button click如何在按钮单击时添加动态文本字段
【发布时间】：2016-05-02 10:05:58
【问题描述】：

我正在处理 jsp 页面。这里我需要在按钮单击时添加文本字段。

我无法编写 java 脚本函数来在按钮单击时添加 textField。

 <body>
 <button type="button">Add more !</button>
 <table id="customers">
   <tr>
     <th>Product</th>
     <th>Quantity</th>
     <th>Price</th>
  </tr>
      <tr>
         <td><input type="text" name="product" value="product.."></input></td>
        <td><input type="number" name="quantity" value="quanty.."></input></td>
        <td><input type="number" name="price" value="price.."></input></td>
      </tr>
    // i want to add these fields dynamically on button click.
 </table>
</body>

【问题讨论】：

你开始使用 JavaScript 了吗？
Adding textbox on button click with javascript的可能重复
@VinothKrishnan 我已经尝试过了。但确实，在我的情况下不起作用。

标签： javascript java jquery jsp

【解决方案1】：

这是一个纯js的基本示例

<p>Create Text Field.</p>

<button onclick="createFunction()">create it</button>

<script>
function createFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "Hello Pritam !");
    document.body.appendChild(x);
}
</script>

【讨论】：

【解决方案2】：

试试吧。只是一个例子。

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>

<button type="button">Add more !</button>
 <table id="customers">
   <tr>
     <th>Product</th>
     <th>Quantity</th>
     <th>Price</th>
  </tr>
      <tr>
         <td><input type="text" name="product" value="product.."></input></td>
        <td><input type="number" name="quantity" value="quanty.."></input></td>
        <td><input type="number" name="price" value="price.."></input></td>
      </tr>

 </table>

  <script>

     $(document).ready(function(){

       $("button").on("click", function(){

         var row = '<tr><td><input type="text" name="product" value="product.."></input></td><td><input type="number" name="quantity" value="quanty.."></input></td><td><input type="number" name="price" value="price.."></input></td></tr>';

         $("#customers").append(row);

       });

     });

    </script>

    </body>
    </html>

【讨论】：

Jenson M John 在 html 的情况下可以正常工作。但不能在 jsp 中工作。
In case of HTML??什么问题？？您可以在 HTML 中集成 JSP 代码

【解决方案3】：

您可以使用 .clone() 方法获取现有行的克隆（副本）。然后你可以 append() 新行。，

$("#add").click(function() {
  var table = $("#customers");
  table.append(table.find("tr:eq(1)").clone());

});

Fiddle

【讨论】：

【解决方案4】：

这是一个如何使用 jQuery 在页面中添加 HTML 的示例。

$("BUTTON").click(function(){
    $("#customers TR").append('<td><input type="yourtype" name="yourname" value="yourvalue"></input></td>');
});

阅读更多here。

【讨论】：

【解决方案5】：

HTML：

<table id="customers">
   <tr>
     <th>Product</th>
     <th>Quantity</th>
     <th>Price</th>
  </tr>
  <tr>
    <td><input type="text" name="product" value="product.."></input></td>
    <td><input type="number" name="quantity" value="quanty.."></input></td>
    <td><input type="number" name="price" value="price.."></input></td>
  </tr>
 </table>

jquery:

i = 1; // yoi can assign unique name to each textbox using this i
$( document ).ready(function() {

  $("#add").click(function() {
     $("#customers").append('<tr><td><input type="text" name="product'+i+'" value="product.."></input></td> <td><input type="number" name="quantity'+i+'" value="quanty.."></input></td>     <td><input type="number" name="price'+i+'" value="price.."></input></td> </tr>');
     i++;

  })

});

【讨论】：