Question

我希望此代码能够检索数组中的所有对象，并将它们显示在“添加”按钮所在的行之前的行中。我看不到显示的项目？以下是代码。

剧本：

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：无法在myscript.js.js上显示（myscript.js：17）的null属性'insertRow'：9

Answer 1

看起来你的代码一旦加载就会运行。

问题是你的表可能在你的代码被加载时不存在（特别是如果你在本地运行它），所以当它试图获取表时，它不会得到（因此为什么{{ 1}}是table）。

相反，您应该使用某种null函数。 jQuery是一个非常受欢迎的选项，虽然您必须导入整个jQuery库，这可能会或可能不会对您的用例有点过分。您也可以实现自己的。那里有很多例子。一个非常简单的问题就是将代码包装在ready回调中：

window.onload

该选项适用于许多现代浏览器。

针对此特定情况的另一个更简单的选择是在关闭window.onload = () => { // your code goes here }代码之前简单地移动<script>代码。这将确保在你的桌子存在之后加载。

Answer 2

只需将代码推迟运行，直到窗口加载DOM为止。您可以将整个脚本移动到body关闭（</body>）之前，或者使用使用.addEventListener()的基于标准的现代DOM事件模型执行此操作：< / p>

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>

无法在HTML表

2 个答案: