如何动态创建字段并自动添加填充字段的值答案

【问题标题】：How to Dynamically create fields and automatically add the values of the filled fields如何动态创建字段并自动添加填充字段的值
【发布时间】：2018-07-13 09:54:10
【问题描述】：

我正在尝试动态添加多个表格，并在生成时自动添加每个“玩家”表格中填写的数量。我已经成功地能够创建输入，但我不知道如何编写“添加”部分。

也许我的代码可以更好地解释我的实践项目（这是个人练习项目，仅供朋友使用。）我的代码：

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
				container.appendChild(document.createElement("br"));
                container.appendChild(document.createTextNode("Jugador " + (i+1)));
				
                var input = document.createElement("input");
                input.type = "text";
                input.name = "Jugador" + i;
				container.appendChild(document.createElement("br"));
				input.value = "Nombre del Jugador " +(1+ i);
                container.appendChild(input);
				container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Puntuación de las rondas"));
				container.appendChild(document.createElement("br"));
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 1" + i;
				input.value = "1";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 2" + i;
				input.value = "2";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 3" + i;
				input.value = "3";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 4" + i;
				input.value = "4";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Total"));
				container.appendChild(document.createElement("br"));
				var s = document.createElement("script");
				s.
				container.appendChild(document.createElement("br"));
            }
        }
    </script>
<style>
.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:12px 21px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

<title>Galle -GO- Web App</title>
</head>
<body>
<b>Número de jugadores:</b>
  <input type="text" id="member" name="member" value="2"><br /><br />
    <a href="#" id="filldetails" onclick="addFields()" class="myButton">Generar Partida</a>
    <div id="container"/><br />

</body>
</html>

【问题讨论】：

标签： javascript add dynamically-generated

【解决方案1】：

有两个拼写错误。

一个原因问题是在最后一个之前有一个额外的s（错字） container.appendChild.
第二个你还没有关闭div像<\div>。但我想这不会导致问题。只是观察。

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
				container.appendChild(document.createElement("br"));
                container.appendChild(document.createTextNode("Jugador " + (i+1)));
				
                var input = document.createElement("input");
                input.type = "text";
                input.name = "Jugador" + i;
				container.appendChild(document.createElement("br"));
				input.value = "Nombre del Jugador " +(1+ i);
                container.appendChild(input);
				container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Puntuación de las rondas"));
				container.appendChild(document.createElement("br"));
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 1" + i;
				input.value = "1";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 2" + i;
				input.value = "2";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 3" + i;
				input.value = "3";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 4" + i;
				input.value = "4";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Total"));
				container.appendChild(document.createElement("br"));
				var s = document.createElement("script");
				container.appendChild(document.createElement("br"));
            }
        }
    </script>
<style>
.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:12px 21px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

<title>Galle -GO- Web App</title>
</head>
<body>
<b>Número de jugadores:</b>
  <input type="text" id="member" name="member" value="2"><br /><br />
    <a href="#" id="filldetails" onclick="addFields()" class="myButton">Generar Partida</a>
    <div id="container"></div><br />

</body>
</html>

【讨论】：