遍历Javascript数组并使用jQuery将行追加到html表中-

Question

此刻我正在遍历一些jQuery数组。 我有一些这样的数据-

我想要的-是遍历此数组，并将值添加到html表中。

喜欢-

Product      Unit Price          Quantity             Total
-----------------------------
------------------------------------
--------------------------
--------------------------

我写的代码是-

    parseRowData() {
    var htmlApp = "";
    $.each(this.dTable, function (ind, val) {
        //var varArr = new Array();
        //varArr.push(val);
        htmlApp += "<tr><td>" + val[ind]["product"] + "</td><td>" + val[ind]["unitprice"] + "</td><td>" + val[ind]["quantity"] + "</td><td>" + val[ind]["total"] + "</td></tr>";
        $("invTable tbody").appendTo(htmlApp);
    });

}

最初我也尝试使用简单的for循环，但是没有得到正确的结果。空白表或具有相同数据行的表会重复几次。 请帮助我构造循环逻辑。

Answer 1

我认为正确的答案是正确的。

知道console.log(val)返回正确的内容（请参阅https://pasteboard.co/HrgUGv8.png），我们也知道val是一个对象。

然后可以通过执行val.product，val.unitprice等来调用该对象的每个属性。

您要在htmlApp变量中串联新创建的行。

完成$ .each循环后，需要将它们插入$("invTable tbody")中。所以：

$。each（this.dTable，function（ind，val）{     //所有建筑物都在这里 }）; $（“ invTable tbody”）。html（htmlApp）;

执行此操作，将<tbody>的全部内容替换为您在htmlApp内串联的所有行。

更多信息： 如果您想将行分别添加到表中，则可以从循环内完成，但不会在htmlApp中将它们连接起来。

您可以这样做：

 $.each(this.dTable, function (ind, val) {

        htmlApp = "<tr><td>" + val.product + "</td>... so on and so forth</tr>";
        $("invTable tbody").append(htmlApp);
    });

请注意，我使用的是append而不是appendTo。

最后……invTable不是HTML元素，所以我猜它是类或ID。如果是课程，则需要在选择器中进行说明：$(".invTable tbody")。如果是ID，则使用$("#invTable tbody")