Question

我正在研究jsp页面。我有要求在点击按钮时添加文本字段。

enter image description here

我无法编写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>

Answer 1

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

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

});

Fiddle

Answer 2

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

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

了解更多here。

Answer 3

试试吧。只是一个例子。

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

Answer 4

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

  })

});

Answer 5

这是纯js的基本示例

＆＃13;

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

＆＃13;

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

5 个答案: