無法在HTML表格中顯示數組元素

我期望此代碼檢索數組中的所有對象，並在「添加」按鈕位於的行之前的行中顯示它們。我沒有看到顯示的項目？下面是代碼無法在HTML表格中顯示數組元素

腳本：

var addButton = document.getElementById("add-button"); 
var textArea = document.getElementById("text"); 
//to display items 
var myArray = [{ 
    "name": "aaa", 
    "level": "A" 
}, { 
    "name": "bbb", 
    "level": "B" 
}, { 
    "name": "ccc", 
    "level": "C" 
}]; 
display(); 

function display() { 
    var table = document.getElementById("mytable"); 
    var length = myArray.length; 
    for (var i = 0; i < length; i++) { 
     var row = table.insertRow(i + 1); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     cell1.innerHTML = myArray[i].name; 
     cell2.innerHTML = myArray[i].level; 
    } //end for 
} //end display

的HTML：

<html> 

<head> 
<meta charset="UTF-8"> 
<script src="myscript.js"></script> 
</head> 

<body id="body"> 

<div id="wrapper"> 
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1> 
<tr> 
<th>Name</th> 
<th>Type</th> 
<th>Action</th> 
</tr> 

<tr> 
<td><input type="text" id="text"></td> 

<td> 
    <select name="levels" id="levels"> 
    <option value="A" id="option-1">A</option> 
    <option value="B" id="option-2">B</option> 
    <option value="C" id="option-3">C</option> 
    </select> 
</td> 

<td><input type="button" class="add" id="add-button" value="Add"></td> 
</tr> 

</table> 
</div> 

</body> 
</html>

問題：

當我在Chrome中打開該頁面，我沒有看到數組元素添加到表中，我得到這個錯誤：

get-text.js:17 Uncaught TypeError: Cannot read property 'insertRow' of null at display (myscript.js:17) at myscript.js.js:9

來源

2017-05-25 user7945230

你目前的代碼似乎工作正常。發生了什麼，你期望發生什麼？ – larz

謝謝你告訴我們你的問題。這導致我認爲'table'爲空，這可能是因爲你的JavaScript在DOM被加載之前被調用。如果是這種情況，請考慮在調用JS之前等待文檔準備就緒。 – larz

@larz它正在工作。謝謝。 – user7945230

只要按住它直到窗口加載了DOM，就可以將代碼從運行中推遲。您可以通過移動你的整個腳本做到這一點之前的body關閉（</body>），也可以與使用現代的，基於標準的DOM事件模型做.addEventListener()：

window.addEventListener("DOMContentLoaded", function(){ 
 

 
var addButton = document.getElementById("add-button"); 
 
var textArea = document.getElementById("text"); 
 
//to display items 
 
var myArray = [{ 
 
    "name": "aaa", 
 
    "level": "A" 
 
}, { 
 
    "name": "bbb", 
 
    "level": "B" 
 
}, { 
 
    "name": "ccc", 
 
    "level": "C" 
 
}]; 
 
display(); 
 

 
function display() { 
 
    var table = document.getElementById("mytable"); 
 
    var length = myArray.length; 
 
    for (var i = 0; i < length; i++) { 
 
     var row = table.insertRow(i + 1); 
 
     var cell1 = row.insertCell(0); 
 
     var cell2 = row.insertCell(1); 
 
     var cell3 = row.insertCell(2); 
 
     cell1.innerHTML = myArray[i].name; 
 
     cell2.innerHTML = myArray[i].level; 
 
    } //end for 
 
} //end display 
 

 

 
});

<html> 
 

 
<head> 
 
<meta charset="UTF-8"> 
 

 
</head> 
 

 
<body id="body"> 
 

 
<div id="wrapper"> 
 
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1> 
 
<tr> 
 
<th>Name</th> 
 
<th>Type</th> 
 
<th>Action</th> 
 
</tr> 
 

 
<tr> 
 
<td><input type="text" id="text"></td> 
 

 
<td> 
 
    <select name="levels" id="levels"> 
 
    <option value="A" id="option-1">A</option> 
 
    <option value="B" id="option-2">B</option> 
 
    <option value="C" id="option-3">C</option> 
 
    </select> 
 
</td> 
 

 
<td><input type="button" class="add" id="add-button" value="Add"></td> 
 
</tr> 
 

 
</table> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-05-25 20:18:24

它看起來像你的代碼在加載後立即運行。

問題在於你的表可能不存在於你的代碼被加載的地方（特別是如果你在本地運行它），所以當它試圖獲取表時，它不會得到（因此爲什麼table是null）。

相反，您應該使用某種ready函數。 jQuery's是一個非常受歡迎的選項，但您必須導入整個jQuery庫，這可能會或可能不會影響您的用例。你也可以實現你自己的。那裏有很多例子。一個非常簡單的只是包裹在window.onload回調代碼：

window.onload =() => { // your code goes here }

該選項將大量的現代瀏覽器。

對於這種特定情況，另一個更簡單的選項是簡單地將您的<script>標記移動到您在關閉</body>標記之前寫入。這將確保它會在之後加載。

來源

2017-05-25 20:09:00 samanime

無法在HTML表格中顯示數組元素

回答

相關問題