时间戳

首页 > 解决方案 > 如何在不使用 insertRow 的情况下使用 JavaScript 将表行添加到 HTML 中的现有表中？

javascript - 如何在不使用 insertRow 的情况下使用 JavaScript 将表行添加到 HTML 中的现有表中？

问题描述

我有一个任务，如果我将一个 0 数组传递给一个函数，我只需要在现有表中添加一行。但是，当我通过赋值检查器运行我的代码时，它一直说我正在制作两行。结果，我一直未能通过单元测试。

该作业还指出，我不允许使用 insertCell 和/或 insertRow，因为它会导致自动评分器出现问题。

我解决这个问题的方法是，如果数组的总和等于 0，则获取具有 id 的现有表distributionTable并将单行附加到它。我使用浏览器检查工具进行调试以确保 HTML 中存在一行。

下面是我在 JavaScript 中创建的函数：

function setTableContent(userInput) {
    let gradeArray = parseScores(userInput);
    let distArray = buildDistributionArray(gradeArray);
    let sum = 0

    for (let i = 0; i < distArray.length; i++) {
        sum = sum + distArray[i];
    }

    if (sum <= 0) {
        var table = document.getElementById("distributionTable")
        row = table.appendChild(document.createElement("tr"));
    } 
}

下面是提供的 HTML 页面，将从 JavaScript 修改：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .bar0 { vertical-align: bottom; background-color: #00C000; }
            .bar1 { vertical‐align: bottom; background-color: #309000; }
            .bar2 { vertical‐align: bottom; background-color: #606000; }
            .bar3 { vertical‐align: bottom; background-color: #903000; }
            .bar4 { vertical‐align: bottom; background-color: #C00000; }
            td { vertical-align: bottom }
        </style>
        <script src="index.js"></script>
    </head>
    <body onload="bodyLoaded()">
        <table style="border: 2px solid black" id="distributionTable">
        </table>
    </body>
</html>

以下是运行代码后浏览器中的 HTML 元素： HTML 检查代码

这是单元测试的输出： 单元测试结果

如果您有任何其他问题或建议，请告诉我。谢谢！

标签： javascripthtmlarrayshtml-table

解决方案

自动分级机似乎很困惑。

我愿意打赌评分者正在检查table.childNodes.length而不是table.children.length。

它应该只检查子节点而不是子节点。

编辑：为了完成作业（当他们修复评分器时），您可以执行以下操作

table.innerHTML = "";
table.appendChild(document.createElement('tr'));

推荐阅读