我见过很多接近的例子，但没有一个是正确的。
我正在构建一个 HTA 表单程序，人们可以在其中输入多行类似数据(例如邮寄地址)。用户将输入的行数由接收数字的输入框确定:
<html>
<head>
<title>Data Entry Application</title>
<hta:application id = "ExampleHTA" singleInstance = "yes" icon = "macexp.ico" border = "thin" minimizeButton = "no" maximizeButton = "no" scroll = "yes" />
<script language="javascript" type="text/javascript">
function numOfLines(choice)
{
for(var i = 0; i < choice; ++i)
{
document.getElementById("addy_lines").innerHTML = "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";
}
}
</script>
</head>
<body>
<form>
Number of Address Lines: <input type="text" id="AddyLines" size=2 maxlength=2 onChange="numOfLines(this.value);">
<div id="addy_lines"></div>
</form>
</body>
</html>
http://jsfiddle.net/isherwood/r9KEH/
当用户在 AddyLines input 框中输入数字时，div id="addy_lines" 中应出现相同的行数> 部分。
示例:用户输入5，则应创建五个输入行。目前，在 div 标记内仅创建一个地址 input 行。
最佳答案
你写道:
document.getElementById("addy_lines").innerHTML = "<br />Name: <input type='text' id='Name' size=50 maxlength=50 /> Address: <input type='text' id='Address' size=50 maxlength=50 /> City: <input type='text' id='City' size=15 maxlength=15 /> State: <input type='text id='State' size=2 maxlength=2 /> Zip Code: <input type='text' id='Zip' size=5 maxlength=5 />";
但是您需要添加字符串，而不是覆盖innerHTML:
document.getElementById("addy_lines").innerHTML+= '<br/>' +
'Name: <input type="text" id="Name" size="50" maxlength="50" /> ' +
'Address: <input type="text" id="Address" size="50" maxlength="50" /> ' +
'City: <input type="text" id="City" size="15" maxlength="15" /> ' +
'State: <input type="text" id="State" size="2" maxlength="2" /> ' +
'Zip Code: <input type="text" id="Zip" size="5" maxlength="5" />';
但总的来说，这是一个糟糕的解决方案，因为现在您有多个具有相同 id 的输入字段，但 id 应该是唯一的。
所以这可能会好得多:
document.getElementById("addy_lines").innerHTML+= '<br />' +
'Name: <input type="text" id="Name-' + i + '" size="50" maxlength="50" /> ' +
'Address: <input type="text" id="Address-' + i + '" size="50" maxlength="50" /> ' +
'City: <input type="text" id="City-' + i + '" size="15" maxlength="15" /> ' +
'State: <input type="text" id="State-' + i + '" size="2" maxlength="2" /> ' +
'Zip Code: <input type="text" id="Zip-' + i + '" size="5" maxlength="5" />';
此外，我会给所有元素一个名称，并使用类而不是 id 来更好地使用 jQuery 来定位它们。但这取决于你。
关于javascript for循环在html div中打印多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23248089/