Question

我看过很多关闭的例子，但没有一个是正确的。

我正在建立一个HTA表格的程序，人们可以输入多行类似的数据（例如邮寄地址）。用户将输入的行数由接收号码的input框决定：

<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 ，然后应创建五个input行。目前，input代码中只创建了一个地址div行。

Answer 1

您写道：

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来定位它们。但这取决于你。

Answer 2

如何改变

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 />";

到

document.getElementById("addy_lines").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 />";

您应该附加更改而不是替换它们。

javascript for循环在html div中打印多行

2 个答案: