代码之家 › 专栏 › 技术社区 › PGC Choudhury

使用jquery遍历javascript数组并将行追加到html表--

dynamic-tables html-table loops jquery

0

PGC Choudhury · 技术社区 · 7 年前

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

enter image description here

我想要的是遍历这个数组,并将值添加到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);
    });

}

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

1 回复 | 直到 7 年前

1

0

Victoria Ruiz 7 年前

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

知道这一点 console.log(val) 返回正确的内容(请参见 https://pasteboard.co/HrgUGv8.png ),我们也知道 val 是一个物体。

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

将新创建的行连接到 htmlApp 变量。

一旦完成$的循环,就需要将它们插入 $("invTable tbody") 是的。所以:

$.each(this.dtable,函数(ind,val){ /你所有的建筑都在这里 }); $(“invtable tbody”).html(htmlap);

执行此操作时,将替换 <tbody> 所有连接到的行 HTMLAP公司 .

更多信息: 如果希望将行单独添加到表中,可以在循环中进行,但不能在htmlap中连接它们。

你可以这样做:

 $.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") 是的。如果是身份证,你可以用 $("#invTable tbody")