Question

由于某种原因，以下代码无法在我的html文档中插入额外的表格。文本只是随机地坐在表的顶部而不是在表中。任何想法为什么它不起作用？

<!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按钮时，为什么表格行不会自动添加到我的表格中？任何帮助表示赞赏!!

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

请注意我实际上是否覆盖了表的.innerHTML属性。这与你在那里的重要区别。

Answer 2

答案前只有几条评论。请注意，您在乞讨时缺少html标记，并且您使用的是错误的栏＆＃34; \＆＃34;关闭表格标题中的标签（应该是＆lt; / th＆gt;）和按钮标签（＆lt; / button＆gt;）。

此外，表格中的div不正确。

代码什么都不做，因为函数只获取innerHTML。为了您的目的，该函数应该获取表格中的内容，添加一行然后将其粘贴回表格

<!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 通过Id先获取表格来向表中添加行

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>？</div>创建表行

3 个答案: