如何在按鈕單擊時添加動態文本字段
[英]how do add dynamic textfield on button click
問題描述
我正在處理 jsp pages.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>
5 個解決方案
解決方案1
1 2016-05-02 10:12:48
這是一個純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
0 2016-05-02 10:11:27
您可以使用 .clone() 方法獲取現有行的克隆（副本）。 然后你可以 append() 新行。，
$("#add").click(function() {
var table = $("#customers");
table.append(table.find("tr:eq(1)").clone());
});
解決方案3
0 2016-05-02 10:11:32
這是如何使用 jQuery 在頁面中添加 HTML 的示例。
$("BUTTON").click(function(){
$("#customers TR").append('<td><input type="yourtype" name="yourname" value="yourvalue"></input></td>');
});
在這里閱讀更多。
解決方案4
0 已采納 2016-05-02 10:12:29
你試一試。 只是一個例子。
<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>
解決方案5
0 2016-05-02 10:12:46
網址：
<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>
查詢：
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++;
})
});
如何在單擊另一個按鈕時將動態 class 添加到多個動態按鈕？
[英]How to add dynamic class to multiple dynamic button on click of another button?
如何在按鈕單擊時添加新文本字段並將該輸入字段的 integer 值添加到反應數組中
[英]How to add a new textfield on button click and add integer value of that input field to an array in react
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.