Javascript，从对象数组创建表单

尝试从数组中读取对象并将它们放置在表单中。我是Javascript新手，我很难理解为什么这不起作用。我试图寻找网上寻求帮助，但到目前为止还没有发现任何东西。Javascript，从对象数组创建表单

这是到目前为止我的代码：

 var arr = [ 
 
      {Section: 1, Max: 20}, 
 
      {Section: 2, Max: 30}, 
 
      {Section: 3, Max: 50} 
 
     ]; 
 

 
     var length = arr.length; 
 

 
     function createForm() { 
 
      for (i = 0; i <= length; i++) { 
 
       form = document.getElementById("formed"); 
 
       var x = arr.Section[i]; 
 
       var y = arr.Max[i]; 
 
       form.appendChild(x); 
 
       form.appendChild(y); 
 

 
      } 
 

 
     }

<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body onload="createForm();"> 
 
<form id="formed"> 
 
</form> 
 
</body>

来源

2017-02-14 NLee57

您的代码不会产生任何HTML元素添加到窗体。 '.appendChild（）'需要一个HTML元素来追加。如果你想插入数据，那么你需要有一个元素来插入它。 –

你必须对阵列使用索引i，而不是对象的属性，如：

var x = arr[i].Section; 
var y = arr[i].Max;

相反的：

var x = arr.Section[i]; 
var y = arr.Max[i];

希望这会有所帮助。

示例代码段从对象产生input的使用值x/y：

var arr = [ 
 
    {Section: 1, Max: 20}, 
 
    {Section: 2, Max: 30}, 
 
    {Section: 3, Max: 50} 
 
]; 
 

 
var length = arr.length; 
 

 
function createForm(){ 
 
    for (i in arr) { 
 
    form = document.getElementById("formed"); 
 

 
    var x = arr[i].Section; 
 
    var y = arr[i].Max; 
 

 
    var input = document.createElement('input'); 
 
    input.setAttribute('value', x+' -- '+y) 
 

 
    form.appendChild(input); 
 
    } 
 
}

<body onload="createForm();"> 
 
    <form id="formed"></form> 
 
</body>

来源

2017-02-14 16:41:05

这仍然不会实际追加到窗体的任何子元素。 –

是的，因为没有生成HTML，但主要问题来自这些索引。我已经添加了一个示例只是为了给它一个想法.. –

谢谢你！我明白我现在要去哪里错了。我真的很努力做到这一点。 – NLee57

我不明白你想做的事，但如果你要拨打的x必须做的数组元素：

var array = ["mario","luca","paolo"]; 
print(array[0]); //will print "mario"

那么你必须这样做：

arr[i].Section;

来源

2017-02-14 16:44:41

你的代码有多个问题。

1中的for循环条件： for循环的条件是不正确循环应该for (i = 0; i <= length; i++) {运行，直到条件i <length否则你将到达数组的长度，并会得到不确定的。

2.访问数组元素：您需要通过索引访问数组。所以下面需要改变，以

var x = arr.Section[i]; var y = arr.Max[i];

要

var x = arr[i].Section; var y = arr[i].Max;

3.Appending节点到DOM：只能添加Node元素到DOM。所以，你不能直接写form.appendChild(x);，而是你需要方法上document对象创建一个Node对象像TextNode像document.createTextNode(x)

因此，更改

form.appendChild(x); form.appendChild(y);

要

var textnodex = document.createTextNode(x); var textnodey = document.createTextNode(y); form.appendChild(textnodex); form.appendChild(textnodey);

以下是公司mplete工作版本

var arr = [ 
 
      {Section: 1, Max: 20}, 
 
      {Section: 2, Max: 30}, 
 
      {Section: 3, Max: 50} 
 
     ]; 
 

 
     var length = arr.length; 
 

 
     function createForm() { 
 
      for (i = 0; i < length; i++) { 
 
       var form = document.getElementById("formed"); 
 
       var x = arr[i].Section; 
 
       var y = arr[i].Max; 
 
       var textnodex = document.createTextNode(x); 
 
       var textnodey = document.createTextNode(y); 
 
       form.appendChild(textnodex); 
 
       form.appendChild(textnodey); 
 

 
      } 
 

 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    
 
</head> 
 
<body onload="createForm();"> 
 

 
<form id="formed"> 
 
</form> 
 

 

 
</body> 
 
</html>

来源

2017-02-14 16:55:14 Agalo

Javascript，从对象数组创建表单

回答

相关问题