Question

我有以下脚本来自stackoverflow。它根据用户输入的数字生成许多输入字段。问题是我需要它根据数组的长度生成一些输入字段[loren，ipsum，lumupus，dumbas]，并为与数组中的字符串相对应的字段分配名称。

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Answer 1

let arr = ['Mark', 'Erik', 'Dave'];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

也许有帮助

Answer 2

这应该使您入门。下面的示例使您可以在输入字段（成员）中键入多个单词，并用逗号分隔，然后创建那么多字段。

这些行在输入字段中输入文本，并根据值创建一个数组（要求值之间用逗号分隔）。

var arr = input.split(',');
var number = arr.length;

然后在循环中，使用此行在需要的位置添加所需的数组元素。我将其放置在输入字段的值（内容）中，但是您可以轻松地将其移到字段之外作为标签，或使用input.id = arr[i]设置字段定义的ID。

function addFields(){
	// Number of inputs to create
	var input = document.getElementById("member").value;
	var arr = input.split(',');
	var number = arr.length;
	// Container <div> where dynamic content will be placed
	var container = document.getElementById("container");
	// Clear previous contents of the container
	while (container.hasChildNodes()) {
		 container.removeChild(container.lastChild);
	}
	for (i=0;i<number;i++){
		 // Append a node with a random text
		 container.appendChild(document.createTextNode("Member " + (i+1)));
		 // Create an <input> element, set its type and name attributes
		 var input = document.createElement("input");
		 input.type = "text";
		 input.name = "member" + i;
		 input.value = arr[i];
		 container.appendChild(input);
		 // Append a line break 
		 container.appendChild(document.createElement("br"));
	}
}

    <input type="text" id="member" name="member" value="lorem, ipsum, plumpus, dumbas"> Members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"></div>

Answer 3

const dummyArray = [{
    fieldLabel: "Lorem",
    fieldName: "lorem"
  },
  {
    fieldLabel: "Ipsum",
    fieldName: "ipsum"
  },
  {
    fieldLabel: "Dolor",
    fieldName: "dolor"
  },
  {
    fieldLabel: "Sit",
    fieldName: "sit"
  },
]

function generateFields() {
// Reset "container"
  document.getElementById("container").innerHTML = ""
  dummyArray.forEach(item => {
    // Get label from array
    container.appendChild(document.createTextNode(item.fieldLabel));
    // Create an <input> element, set its type and name attributes
    var input = document.createElement("input");
    input.type = "text";
    // Get input name from array
    input.name = item.fieldName;
    container.appendChild(input);
    // Append a line break 
    container.appendChild(document.createElement("br"));
  })
}

<a href="#" id="filldetails" onclick="generateFields()">Generate Fields</a>
<div id="container" />

Answer 4

如果您尝试使用数组[loren, ipsum, plumpus, dumbas]创建输入字段，那么这里是修改后的代码版本。

<html>
<head>

</head>
<body>
    <div id="container"/>


    <script type='text/javascript'>
        function addFields(){
        var fieldNames = ['loren', 'ipsum', 'plumpus', 'dumbas'];
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            
            for (i=0;i<fieldNames.length;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode(fieldNames[i]));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = fieldNames[i];
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
        addFields();
    </script>

</body>
</html>

如何根据数组的名称和长度创建动态表格？

4 个答案: