无法在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表格中显示数组元素

回答

相关问题