遍历 Javascript 数组并使用 jQuery 将行附加到 html table --

Question

我目前正在努力处理一些 jQuery 数组遍历。我有一些这样的数据 --

我想要的 - 是遍历这个数组，并将值添加到 html table。

喜欢--

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 循环，但我没有得到正确的结果。空白 table 或具有重复多次的相同数据行的 table。请帮助我构建循环逻辑。

Answer 1

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

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

然后您可以通过 val.product、val.unitprice 等调用该对象的每个属性

您正在连接 htmlApp 变量中新创建的行。

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

$.each(this.dTable, 函数 (ind, val) { //你所有的建筑都在这里 }); $("invTable tbody").html(htmlApp);

这样做，您将 <tbody> 的全部内容替换为您在 htmlApp.

中连接的所有行

更多信息：如果您想将行单独添加到您的 table，您可以在循环内完成，但您不会在 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 元素，所以我猜它是 class 或 ID。如果是 class，您需要在选择器中指明：$(".invTable tbody")。如果是 ID，则使用 $("#invTable tbody")

遍历 Javascript 数组并使用 jQuery 将行附加到 html table --

Traverse Javascript array and append rows to html table with jQuery --

jquery

loops

html-table

dynamic-tables