为什么我不能使用 JavaScript 和 <div> 来创建 Table 行？

Question

出于某种原因，以下代码无法将额外的 table 插入到我的 html 文档中。文本只是随机位于 table 的顶部，而不是在 table 中。知道为什么它不起作用吗？

<!DOCTYPE html>
<head>
<script type = "text/javascript">
    function insertTable() {

    var table = document.getElementById("houseListingTable").innerHTML;
    table = table + "<tr><td>58,500</td><td>Montreal</td></tr>";
    }

</script>
</head>
<body>

<table>
    <tr>
        <th>Price</th>
        <th>Location</th>
    </tr>
    <div id = "houseListingTable">
    </div>
</table>

<button onclick = "insertTable()">Insert Table<\button>
</body>
</html>

为什么当我单击 Insert Table 按钮时 table 行没有自动添加到我的 table 中？感谢任何帮助！！

Answer 1

这里有两个问题：

将 <div> 元素直接放在 <table> 中是无效的 HTML。
您的 table 变量在这里只是一个字符串。覆盖它对 DOM.

要修复它：

删除 <div> 并给 <table> 一个 ID：

<table id="houseListingTable">
<tr>
    <th>Price<\th>
    <th>Location<\th>
</tr>
</table>

使用这个 JavaScript:

var table = document.getElementById("houseListingTable");
table.innerHTML += "<tr><td>58,500</td><td>Montreal</td></tr>";

请注意我实际上是如何覆盖 table 的 .innerHTML 属性。这是与您那里的重要区别。

Answer 2

答案前的几条评论。请注意，您在开头缺少 html 标签，并且您在 table headers 中使用了不正确的横线“\”来关闭标签（应该是 < /th> ) 和按钮标记 (< /button>)。

另外，table里面的div不正确。

该代码没有执行任何操作，因为该函数只是获取了 innerHTML。为了您的目的，该函数应该获取 table 中的内容，添加一行，然后将其粘贴回 table

<!DOCTYPE html>
<html>
<head>
    <script type = "text/javascript">
        function insertTable() {
            var table = document.getElementById("houseListingTable").innerHTML;
            table = table + "<tr><td>58,500</td><td>Montreal</td></tr>";
            document.getElementById("houseListingTable").innerHTML = table;
        }
    </script>
</head>
<body>
    <table id="houseListingTable">
        <tr>
            <th>Price</th>
            <th>Location</th>
        </tr>
    </table>
    <button onclick = "insertTable()">Insert Table</button>
</body>
</html>

Answer 3

你的 HTML 坏了。结束标签错误。

<table id="houseListingTable">
    <tr>
        <th>Price</th>
        <th>Location</th>
    </tr>
</table>

您可以使用 DOM 的 insertRow 方法将行添加到 table，方法是首先通过 Id[=12] 获取 table =]

function insertTable() {

          // Find a <table> element with id="houseListingTable":
        var table = document.getElementById("houseListingTable");

        // Create an empty <tr> element and add it to the table:
       var row = table.insertRow(table.rows.length);


        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        // Append a text node to the cell1
        var price  = document.createTextNode('58,500')
        cell1.appendChild(price);

        // Append a text node to the cell2
        var location  = document.createTextNode('Montreal')
        cell2.appendChild(location);
        }

为什么我不能使用 JavaScript 和 <div> 来创建 Table 行？

Why can't I make a Table row using JavaScript and a <div>?

html

javascript

function

button