开发者问题收集

不完全确定为什么我会收到无法读取空错误消息的属性“innerHTML”

2021-08-02
96
javascript html html-table dom-events tr

我尝试使用 JS 向 html 代码添加一个表格行，但收到​​一条错误消息，指出“未捕获的 TypeError：无法读取 null 的属性‘innerHTML’” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="index.js"></script>
</html>

let table = document.getElementById(sampleTable);

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}
3个回答

您使用了错误的语法。 id 或任何与字符串相关的内容都必须放在双引号内

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById 

let table = document.getElementById("sampleTable");

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="index.js"></script>
</html>
Huy Phạm
2021-08-02

您需要在 id 

let table = document.getElementById("sampleTable");
function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
    <td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>

</html>
中添加引号
mk23
2021-08-02

您必须向 getElementById 方法提供一个字符串作为参数 

let table = document.getElementById("sampleTable");

另外，似乎您想将一个表格行附加到表格中，innerHTML 属性不会有帮助，因为它提供了指定元素的内部 html 文本，例如一个段落。要将元素附加到表中，您必须先通过 .createElement 创建表行元素，然后使用 .append 或 .appendChild 方法将子元素附加到其父元素中 

let table = document.getElementById("sampleTable");

function insert_Row() {
    let template = document.createElement('TR');
    // then use the innerHTML property to insert data into your table row
    table.append(template);
}

或者您可以使用 .insertRow 方法直接插入行

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

yashsh
2021-08-02