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，從對象數組創建表單

回答

相關問題