我正在开发一个 HTML 表单，它将数据发布到我的 Web 服务器以存储到数据库中。我对 PHP 和 SQL 代码没有问题，但我想在客户端表单上有一个小功能:
将有一个下拉列表(选择)询问您想要多少行的特定类型。然后，一个小的 JavaScript 应该会为您生成这些。
像这样:
<form method="POST" action="act.php">
<select name="numrows"><option>1</option><option>2</option></select>
<table>
<tr>
<td><input type="text" name="row[x]" /></td>
</tr>
</table>
</form>
现在我想拥有尽可能多的 <tr> 副本在 numrows 中选择，并且每个名称中都有相应的数字(替换 x )。我将如何在 JavaScript 中实现它？
我知道我需要编写一个方法并用 onchange 引用它select 中的事件标记，但我完全不知道如何编写此函数。
最佳答案
我相信您可以使用 jQuery 等以各种方式完成此操作，但如果您想要一个可移植的、符合 DOM 的解决方案，您可能想要回到像这样的基础:
<html>
<head>
<script type="text/javascript">
function removerows (tablebody) {
var rows = tablebody.getElementsByTagName("tr");
while (rows.length)
rows[0].parentNode.removeChild(rows[0]);
}
function addrows (tablebody, n) {
for (var i=0; i<n; i++) {
var row = document.createElement("tr");
var titlecell = document.createElement("td");
titlecell.appendChild(document.createTextNode("Row " + i));
row.appendChild(titlecell);
var cell = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "row["+i+"]");
cell.appendChild(input);
row.appendChild(cell);
tablebody.appendChild(row);
}
}
function change () {
var select = document.getElementById("numrows");
var index = select.selectedIndex
var n = parseInt(select.value);
var tablebody = document.getElementById("maintablebody");
removerows(tablebody);
addrows(tablebody, n);
}
</script>
</head>
<body>
<form method="POST" action="act.php">
<select id="numrows" name="numrows" onchange="change()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<table id="maintable">
<tbody id="maintablebody">
<tr>
<td>Row 0</td>
<td><input type="text" name="row0" /></td>
</tr>
</tbody>
</table>
<input type="submit"/>
</form>
</body>
</html>
这里我使用的是 W3C DOM Level 1 , 和 HTML extensions .唯一不太标准的方面是对 select 元素使用 onchange 属性。如果您想对此保持纯粹，您可能希望使用 addElementListener 和 attachEvent。
将此 HTML 粘贴到一个文件中，然后在 Firefox 和/或 Internet Explorer 中尝试它，看看它是否能满足您的需求。如果您不相信，请回来提问。
关于javascript - 使用 Javascript 更改 HTML 输入字段的数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2259036/