Пройдите через массив Javascript и добавьте строки в таблицу html с помощью jQuery - - PullRequest
Новая
       49

Пройдите через массив Javascript и добавьте строки в таблицу html с помощью jQuery -

0 голосов
/ 23 июня 2018

Сейчас я борюсь с обходом массива jQuery.У меня есть некоторые данные, как это -

enter image description here

Что я хочу - это пересечь этот массив и добавить значения в HTML-таблицу.

Like - 

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 Ответ

0 голосов
/ 23 июня 2018

Я думаю, что правильный ответ в порядке.

Зная, что 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, поэтому я предполагаю, что это либо класс, либо идентификатор.это класс, вам нужно указать это в вашем селекторе: $(".invTable tbody").Если это ID, вы используете $("#invTable tbody")

...