当用户输入行数时，我需要动态创建表单。
我尝试了以下代码，花了一个多小时在网上搜索，无法解决问题。
我首先使用PHP来做这件事，我一直困扰着，论坛上的人建议我使用Javascript。
我现在很困惑!!请给我一个线索！
<p>
<h3>Assignment 11]</h3>***********************</p>
<form action="" method="post">
<b>Number of items</b> (between 1 and 30):
<input type="number" name="numbItems" min="1" max="30" id="numbItem">   
<input name="submit" value="Create" type="submit" id="createItem">
</form>
<script type="text/javascript">
//document.getElementById("numbItem").onchange = function() {
document.getElementById("createItem").onclick = function() {
var price = document.getElementById("numbItem").value;
//document.getElementById("demo").innerHTML = "your model price will be " + price ;
alert(price + " items created.");
};
</script>
<br>=============================================================================<br><br>
<table>
<tr>
<td>Item</td>
<td>                                        Value ( R )</td>
<td>                                Taxes ( R )</td>
<td>                               VAT ( % )</td>
</tr>
</table>
<br>=============================================================================<br><br>
<?php if($numbItems=="1") { ?>
<form action="" method="post">
<input type="text" name="item1" placeholder="E.g.: Gross Salary" />     <input type="text" name="value1" placeholder="E.g.: 12000" />      
<input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc">     <input type="number" name="vat1" min="0" max="100">       <input name="btnItem1" value="Calculate" type="button"><br><br>
</form>
<?php } ?>
<?php if($numbItems=="2") { ?>
<form action="" method="post">
<input type="text" name="item1" placeholder="E.g.: Gross Salary" />     <input type="text" name="value1" placeholder="E.g.: 12000" />      
<input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc">     <input type="number" name="vat1" min="0" max="100">       <input name="btnItem1" value="Calculate" type="submit"><br><br>
<input type="text" name="item2" placeholder="E.g.: Electricity" />     <input type="text" name="value2" placeholder="E.g.: 750" />      
<input type="text" name="tax2" value="" readonly style="color:#f00;background:#ccc">     <input type="number" name="vat2" min="0" max="100">       <input name="btnItem2" value="Calculate" type="submit"><br><br>
<!-- <input type="submit" value="Submit"> -->
</form>
<?php } ?>
答案 0 :(得分：0)
如果你有jQuery ...
1.在表单中添加 id 元素或创建新的 DIV ，如下所示
<form action="" method="post">
<div id="theForm"></div>
</form>
2.jQuery函数
$('#createItem').click(function(e){
$('#theForm').append('<< Your Items HTML Code >>')
});
3.将名称元素更改为item[]而不是item1和其他
当您在PHP中调用$_POST['item']时，该项将被读取为数组。您可以使用
$items = $_POST['item'];
foreach($items as $item){
echo $item; //Output the value
}
答案 1 :(得分：0)
这会对你有所帮助。祝你好运
$(document).ready(function(e) {
$("#create").on("click",function(){
var num = $("#num").val();
if(num>1){
for(i=1; i<=num; i++){
$(".extra").append('<tr><td><input type="text"></td></tr>');
}
}else{
$(".extra").append('<tr><td><input type="text"></td></tr>');
}
});
});<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="number" id="num">
<button type="button" id="create">Create</button>
<table>
<tbody class="extra">
</tbody>
</table>
答案 2 :(得分：0)
检查以下代码。我使用Jquery来做这件事。如果你使用javascript轻松一点，你就能理解它。希望，它可以帮助您了解如何在Javascript中处理这种情况。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
$( "#createItem" ).click(function() {
var totalRows = $('#numbItem').val();
var formHtml = '';
for (var i = 1; i <= totalRows; i++)
{
formHtml += ' <input type="text" name="item'+i+'" placeholder="E.g.: Gross Salary" /> <input type="text" name="value'+i+'" placeholder="E.g.: 12000" /> <input type="text" name="tax'+i+'" value="" readonly style="color:#f00;background:#ccc"> <input type="number" name="vat'+i+'" min="0" max="100"> <input name="btnItem'+i+'" value="Calculate" type="button"><br><br>';
}
$('#userForms').html(formHtml);
});
});
</script>
</head>
<body>
<b>Number of items</b> (between 1 and 30):
<input type="number" name="numbItem" min="1" max="30" id="numbItem">   
<button id='createItem' type="button">Create</button>
<div id=userForms></div>
</body>
</html>
答案 3 :(得分：0)
我会指出一些事情，标记
<hr>
是用于放置所需分色的html方式。
当使用表时，尝试使用thead，tbody和tfoot，因为它提供了一种直接的方式来添加元素以及触摸页眉或页脚。
至于主要问题，JQuery是强大的，但如果你是一个新手，不知道基础知识将来会给你带来问题。因为这里有很好的JQuery答案，这里是一个简单的JavaScript解决方案
<html>
<body>
<p>
<h3>Assignment 11</h3>
<hr>
<form action="" method="post">
<p>
<b>Number of items</b> (between 1 and 30):
</p>
<input type="number" name="numbItems" min="1" max="30" step="1" id="numbItem">
<br>
<input name="submit" value="Create" type="button" id="createItem">
</form>
<hr>
<table>
<thead>
<tr>
<td>Item</td>
<td>Value ( R )</td>
<td>Taxes ( R )</td>
<td>VAT ( % )</td>
</tr>
</thead>
<tbody id="itemsTableBody"></tbody>
<tfoot>
<tr>
<td>Item</td>
<td>Value ( R )</td>
<td>Taxes ( R )</td>
<td>VAT ( % )</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
document.getElementById("createItem").onclick = function() {
var price = document.getElementById("numbItem").value;
var tbody = document.getElementById("itemsTableBody");
var olds = tbody.childNodes;
for (; olds.length > 0;) {
tbody.removeChild(olds[0]);
}
for (var i = 0; i < price; ++i) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.appendChild(document.createTextNode("td1 " + i));
td2.appendChild(document.createTextNode("td2 " + i));
td3.appendChild(document.createTextNode("td3 " + i));
td4.appendChild(document.createTextNode("td4 " + i));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tbody.appendChild(tr);
}
};
</script>
</body>
</html>