无法识别 insertRow JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27371109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
insertRow JavaScript not recognized
提问by Roland Jegorov
I'm new to javascript but still tend to try fixing an issue myself. However, I got frustrated because the same function works for a slightly different HTML without tbodyand thead.
我是 javascript 新手，但仍然倾向于尝试自己解决问题。但是，我感到沮丧，因为相同的函数适用于略有不同的 HTML，没有tbody和thead。
The error I get is --> Uncaught TypeError: Cannot read property 'insertRow' of null.
我得到的错误是 --> 未捕获的类型错误：无法读取 null 的属性“insertRow”。
Where am I wrong? Also probably there is a better way to add a table row? I tried .appendbut it did not work for me.
我哪里错了？也可能有更好的方法来添加表格行？我试过.append但它对我不起作用。
HTML
HTML
<table class="table table-striped myTable">
<button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>City</th>
<th>Sex</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr id="firstRow">
<td>John</td>
<td>Morgan</td>
<td>[email protected]</td>
<td>London</td>
<td>Male</td>
<td>09.12.14</td>
<td>04:17 a.m.</td>
</tr>
</tbody>
</table>
JavaScript
JavaScript
$("#addTableRow").click( function(){
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Text-1";
cell2.innerHTML = "Text-2";
cell3.innerHTML = "Text-3";
cell4.innerHTML = "Text-4";
cell5.innerHTML = "Text-5";
cell6.innerHTML = "Text-6";
});
回答by Calummm
Just a few typos, missing ID on your table and mixing jQuery incorrectly.
只是一些错别字，缺少表上的 ID 并且错误地混合了 jQuery。
$("#addTableRow").click( function () {
var row = $("<tr>");
row.append($("<td>Text-1</td>"))
.append($("<td>Text-2</td>"))
.append($("<td>Text-3</td>"))
.append($("<td>Text-4</td>"))
.append($("<td>Text-5</td>"))
.append($("<td>Text-6</td>"))
.append($("<td>Text-7</td>"));
$("#myTable tbody").append(row);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myTable" class="table table-striped myTable">
<button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>City</th>
<th>Sex</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr id="firstRow">
<td>John</td>
<td>Morgan</td>
<td>[email protected]</td>
<td>London</td>
<td>Male</td>
<td>09.12.14</td>
<td>04:17 a.m.</td>
</tr>
</tbody>
</table>回答by Loaderon
Not strictly related to the question, but I ended up here for having the "Uncaught TypeError: table.insertRow is not a function" error. You may be having the same problem. If so:
与问题并不严格相关，但我最终因为“未捕获的类型错误：table.insertRow 不是函数”错误而来到这里。您可能遇到了同样的问题。如果是这样：
If you want to use
如果你想使用
row.insertCell(0);
and you receive the former error, be sure not to get the element by using jquery:
并且您收到前一个错误，请确保不要使用 jquery 获取元素：
DO NOT
不要
let table = $("#peopleTable");
let newRow = table.insertRow(0);
DO
做
let table = document.getElementById("peopleTable");
let newRow = table.insertRow(0);
