как добавить динамическое текстовое поле при нажатии кнопки

-2

Я работаю над страницами jsp. У меня есть требования по добавлению текстовых полей при нажатии кнопки.как добавить динамическое текстовое поле при нажатии кнопки

as shown in image.

Я не могу написать функцию сценария 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>

источник

2016-05-02 Pritam Tiwari

Вы писали: _JavaScript_? – Rayon

Возможный дубликат [Добавление текстового поля при нажатии кнопки с помощью javascript] (http://stackoverflow.com/questions/26227487/adding-textbox-on-button-click-with-javascript) –

@VinothKrishnan Я уже пробовал это. но не работал в моем случае. –

Просто попробуйте. Просто пример.

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

источник

2016-05-02 10:12:29

Jenson M John отлично работает в случае html. но не работает в jsp. –

'В случае HTML' ?? В чем проблема?? Вы можете интегрировать JSP-код в HTML –

Вы можете использовать метод .clone() для получения клона (копии) существующей строки. Затем вы можете добавить() новую строку.,

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

});

Fiddle

источник

2016-05-02 10:11:27

Это пример того, как добавить HTML на страницу с JQuery.

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

Подробнее here.

источник

2016-05-02 10:11:32 erikscandola

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

    }) 

});

источник

2016-05-02 10:12:46

Это основной пример с чистым 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>

источник

2016-05-02 10:12:48

как добавить динамическое текстовое поле при нажатии кнопки

ответ

Смежные вопросы