开发者问题收集

无法在 HTML 表中显示数组元素

2017-05-25
256
javascript html html-table

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

脚本： 

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

2个回答

只需将代码保留到窗口加载完 DOM 后再运行即可。您可以通过将整个脚本移动到 body 关闭之前 ( </body> ) 来实现此目的，或者您可以使用使用 .addEventListener() 的现代、基于标准的 DOM 事件模型来实现此目的： 

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>
Scott Marcus
2017-05-25

看起来您的代码在加载后立即运行。

问题在于，您的表可能在代码加载时不存在（特别是如果您在本地运行它），因此当它尝试获取表时，它不在那里（因此 table 为 null ）。

相反，您应该使用某种 ready 函数。jQuery 是一个非常受欢迎的选项，尽管您必须导入整个 jQuery 库，这对于您的用例来说可能有点过度，也可能不太过度。您也可以实现自己的。有很多例子。一个非常简单的方法就是将代码包装在 window.onload 回调中： 

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

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

对于这种特定情况，另一个更简单的选项是简单地将您的 <script> 标记移动到结束 </body> 标记之前。这将确保它会在 之后 您的表格出现。

samanime
2017-05-25