insertRow JavaScript 无法识别答案

【问题标题】：insertRow JavaScript not recognizedinsertRow JavaScript 无法识别
【发布时间】：2014-12-09 03:48:30
【问题描述】：

我是 javascript 新手，但仍倾向于尝试自己解决问题。但是，我感到很沮丧，因为相同的函数适用于没有 tbody 和 thead 的稍微不同的 HTML。

我得到的错误是 --> Uncaught TypeError: Cannot read property 'insertRow' of null.

我哪里错了？也可能有更好的方法来添加表格行？我尝试了 .append，但它对我不起作用。

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>mail@mail.com</td>
            <td>London</td>
            <td>Male</td>
            <td>09.12.14</td>
            <td>04:17 a.m.</td>
        </tr>
    </tbody>
</table>

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";

});

【问题讨论】：

您已将myTable 定义为一个类。将您的表格标签更改为<table id="myTable" class="table table-striped">
@Papa 谢谢！真是我的错。 :/ 但是如果我把 insertRow (-1);它说意外令牌非法。正如我所读到的，它应该把这一行放在最后一行，对吧？
@Papa 谢谢你和@Calummm！现在可以了！

标签： javascript html

【解决方案1】：

只是一些拼写错误，表格中缺少 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>mail@mail.com</td>
                    <td>London</td>
                    <td>Male</td>
                    <td>09.12.14</td>
                    <td>04:17 a.m.</td>
                </tr>
            </tbody>
        </table>

【讨论】：

【解决方案2】：

与问题不严格相关，但我最终出现“未捕获的 TypeError：table.insertRow 不是函数”错误。你可能有同样的问题。如果是这样：

如果你想使用

row.insertCell(0);

如果你收到前一个错误，请务必不要使用 jquery 获取元素：

不要

let table = $("#peopleTable");
let newRow = table.insertRow(0);

做

let table = document.getElementById("peopleTable");
let newRow = table.insertRow(0);

【讨论】：

.insertRow 在 jquery 获取的表上不起作用，这是正确的。