使用Javascript创建表格

Question

我在创建一个抽奖发电机，并且只使用HTML和Javascript来做到这一点。我现在有用户为'玩家'数量选择一个'选择'选项，然后用一个onclick（）事件创建许多'名称'框。

这个代码是：

<label for="playerNumbers">How many people are involved in the sweepstake?</label> 
<select id="playerNumbers" name="playerNumbers"> 
<option value="2" onclick="makeform(2)"> 2 </option> 
<option value="3" onclick="makeform(3)"> 3 </option> 
<option value="4" onclick="makeform(4)"> 4 </option> 
<option value="5" onclick="makeform(5)"> 5 </option> 
<option value="6" onclick="makeform(6)"> 6 </option> 
<option value="7" onclick="makeform(7)"> 7 </option> 
<option value="8" onclick="makeform(8)"> 8 </option> 
<option value="9" onclick="makeform(9)"> 9 </option> 
<option value="10" onclick="makeform(10)"> 10 </option> 
</select> 

与'makeform（）函数看起来像：

function makeform(numberOfPlayers) { 
var x = '<form id="playerNames">'; 
for (i = 0; i < numberOfPlayers; i++) { 
    x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>'; 
    x += '<input type="text" id="player'+(i+1)+'" />'; 
    x += '<br />'; 
} 
document.getElementById("newForm").innerHTML = x; 
} 

此作品一种享受，但是当用户在新填充的问题就来了生成的表单。我在“整体表单”（包括新表单）底部提交了一个提交底部，但似乎并未识别新生成的表单。

我想我问了两个问题： 1.）我该怎么做这项工作？你可以使用JavaScript无限生成表单还是有限制？ 2.）这是做这件事的最好方法吗？我确定它不是，但不知道我应该看什么技术。

谢谢！

（通过请求 - 所有的代码:)

<form id="nameForm"> 
<div id="teamForm"> 
<label for="teamNumber">How many teams are involved?</label> 
<select id="teamNumber" name="teamNumber"> 
<option value="2" onclick="makeform1(2)"> 2 </option> 
<option value="3" onclick="makeform1(3)"> 3 </option> 
<option value="4" onclick="makeform1(4)"> 4 </option> 
<option value="5" onclick="makeform1(5)"> 5 </option> 
<option value="6" onclick="makeform1(6)"> 6 </option> 
<option value="7" onclick="makeform1(7)"> 7 </option> 
<option value="8" onclick="makeform1(8)"> 8 </option> 
<option value="9" onclick="makeform1(9)"> 9 </option> 
<option value="10" onclick="makeform1(10)"> 10 </option> 
<option value="11" onclick="makeform1(11)"> 11 </option> 
<option value="12" onclick="makeform1(12)"> 12 </option> 
<option value="13" onclick="makeform1(13)"> 13 </option> 
<option value="14" onclick="makeform1(14)"> 14 </option> 
<option value="15" onclick="makeform1(15)"> 15 </option> 
<option value="16" onclick="makeform1(16)"> 16 </option> 
<option value="17" onclick="makeform1(17)"> 17 </option> 
<option value="18" onclick="makeform1(18)"> 18 </option> 
<option value="19" onclick="makeform1(19)"> 19 </option> 
<option value="20" onclick="makeform1(20)"> 20 </option> 
<option value="21" onclick="makeform1(21)"> 21 </option> 
<option value="22" onclick="makeform1(22)"> 22 </option> 
<option value="23" onclick="makeform1(23)"> 23 </option> 
<option value="24" onclick="makeform1(24)"> 24 </option> 
<option value="25" onclick="makeform1(25)"> 25 </option> 
<option value="26" onclick="makeform1(26)"> 26 </option> 
<option value="27" onclick="makeform1(27)"> 27 </option> 
<option value="28" onclick="makeform1(28)"> 28 </option> 
</select> 
<div id="newForm2"></div> 
</div> 
<label for="playerNumbers">How many people are involved in the sweepstake?</label> 
<select id="playerNumbers" name="playerNumbers"> 
<option value="2" onclick="makeform(2)"> 2 </option> 
<option value="3" onclick="makeform(3)"> 3 </option> 
<option value="4" onclick="makeform(4)"> 4 </option> 
<option value="5" onclick="makeform(5)"> 5 </option> 
<option value="6" onclick="makeform(6)"> 6 </option> 
<option value="7" onclick="makeform(7)"> 7 </option> 
<option value="8" onclick="makeform(8)"> 8 </option> 
<option value="9" onclick="makeform(9)"> 9 </option> 
<option value="10" onclick="makeform(10)"> 10 </option> 
</select> 
<div id="newForm"></div> 
<input type="submit" value="Submit Form" onclick="doSweepstake(this.form)" /> 
</form> 

和：

function makeform1(numberofTeams) { 
var y = '<form id="teamNames">'; 
for (j = 0; j < numberofTeams; j++) { 
    y += '<label for="team'+(j+1)+'">Team '+(j+1)+'</label>'; 
    y += '<input type="text id="team'+(j+1)+'" />'; 
    y += '<br />'; 
} 
document.getElementById("newForm2").innerHTML = y; 
} 

除了上面已经给出的功能。

Answer 1

原则上这不起作用，因为您无法嵌套表单。您需要将这些字段添加到父表单。

你可以用普通的JS做到这一点，但我建议你不要重新发明轮子并学习使用JS库 - 比如jQuery。这会让你的生活变得更容易 - 它极大地简化了DOM操作（并且做得更多）。例如，你可能只是做到以下几点：

$("#playerNumbers option").click(function() { 
    var p = $("#playerNames"); 
    for (var i = 0; i < $(this).attr("value"); i++) 
     p.append('<label><input /></label><br />'); // etc 
}) 

也许起初看起来很奇怪，但是通过这个代码，第二次看说明你有很多熟悉的东西 - 和使用这样的事情，而不是优雅那些笨重的野兽是onclick和innerHTML。

Answer 2

有一些事情我已经发现：

1），你应该使用在选择onchange事件，而不是选择一个onclick - 这使得跨浏览器的友好访问 - 如果发生什么用户选择选择，然后使用箭头键更改选择？ onclick不会触发...

<select id="playerNumbers" name="playerNumbers" onchange="makeform(this.options[this.selectedIndex].value)"> 
    <option value="2"> 2 </option> 
    <option value="3"> 3 </option> 
    <option value="4"> 4 </option> 
    <option value="5"> 5 </option> 
    <option value="6"> 6 </option> 
    <option value="7"> 7 </option> 
    <option value="8"> 8 </option> 
    <option value="9"> 9 </option> 
    <option value="10"> 10 </option> 
</select> 

2）通过JavaScript创建的表单没有结束标记或提交按钮。

3）您的输入元素没有名称，因此不会发送POST/GET数据。

试试这个：

function makeform(numberOfPlayers) { 
    var x = '<form id="playerNames">'; 
    for (i = 0; i < numberOfPlayers; i++) { 
     x += '<label for="player'+(i+1)+'">Player '+(i+1)+'</label>'; 
     x += '<input type="text" id="player'+(i+1)+'" name="player[]" />'; 
     x += '<br />'; 
    } 
    x += '<input type="submit" name="submit" value="Submit" />'; 
    x += '</form>'; 
    document.getElementById("newForm").innerHTML = x; 
}