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

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

javascript java jquery jsp

Javascript 如何在单击按钮时添加动态文本字段,javascript,java,jquery,jsp,Javascript,Java,Jquery,Jsp,我正在处理jsp页面。在这里，我需要在单击按钮时添加文本字段 <body> <button type="button">Add more !</button> <table id="customers"> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> <

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

 <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>

我无法编写java脚本函数来在单击按钮时添加文本字段

 <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>


添加更多！
产品
量
价格
//我想在单击按钮时动态添加这些字段。

您可以使用.clone（）方法获取现有行的克隆（副本）。然后可以将（）追加到新行

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

});

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

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

$（“按钮”）。单击（函数（）{
$（“#客户TR”）。附加（“”）；
});

阅读更多信息。

试试看。只是一个例子

    <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>


添加更多！
产品
量
价格
$（文档）.ready（函数（）{
$（“按钮”）。在（“单击”，函数（）{
var行=“”；
$（“#客户”）。追加（行）；
});
});

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++;

  })

});

i=1；//yoi可以使用此i为每个文本框指定唯一的名称
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（“#客户”）。附加（“”）；
i++；
})
});

这是纯js的一个基本示例

创建文本字段

创造它函数createFunction（）{ var x=document.createElement（“输入”）； x、 setAttribute（“类型”、“文本”）； x、 setAttribute（“value”，“Hello Pritam！”）；文件.正文.附件（x）； }

你开始使用JavaScript了吗？可能是@VinothKrishnan的副本我已经试过了。但是,在我的情况下不起作用,简森M约翰,在html的情况下效果很好。但不在jsp中工作。

如果是HTML

？？有什么问题吗？？您可以将JSP代码集成到HTML中