循环时的jQuery表问题

时间:2018-04-17 08:40:25

标签: jquery html

我想创建一个表但是有两个循环,因为有两个数组需要包含在表中。

这是两个数组(来自控制台视图):

对象{quota:(5)[...],productName:(5)[...]}

在配额中,有与每个productName相关的数字。

以下是该表的代码部分。

jQuery.ajax({
                    type: "POST",
                    url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
                    data: {dataArrayPost : Data},
                    success: function(data){
                        var a = JSON.parse(data);
                        console.log(a);
                        var prodName = a.productName; 
                        var splitProductName = "";
                        var prodQty = a.quota; 
                        var splitProductQuota = "";
                        var contents = '<table id="tableDonateDisplay" class="table table-hover">';
                        contents += "<tr>";
                        contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
                        jQuery.each(prodName, function(index, value) {
                            splitProductName = value;
                            contents += "<tr>";
                            contents += '<td>' + splitProductName;
                        });
                        jQuery.each(prodQty, function(index, value) {
                            splitProductQuota = value;
                            contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
                            contents += "</tr>";
                        });
                        contents += "</tr></table>";
                        jQuery('#contentNeed').append(contents);
                    }
                });

enter image description here

桌子就像这样。我需要在产品名称旁边添加配额。有人能帮我吗。谢谢你提前。

JSON数据: enter image description here

1 个答案:

答案 0 :(得分:2)

首先,您需要关闭tr的{​​{1}}标记,然后检查两次迭代的索引:

&#13;
&#13;
th
&#13;
var a = {
  productName: ["a", "b", "c", "d"],
  quota: [1, 5, 10, 20]
};
console.log(a);
var prodName = a.productName;
var splitProductName = "";
var prodQty = a.quota;
var splitProductQuota = "";
var contents = '<table id="tableDonateDisplay" class="table table-hover" border="1">';
contents += "<tr>";
contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
contents += "</tr>";

jQuery.each(prodName, function(index1, value1) {
  splitProductName = value1;
  contents += "<tr>";
  contents += '<td>' + splitProductName;
  jQuery.each(prodQty, function(index, value) {
    if (index1 == index) {
      splitProductQuota = value;
      contents += '</td><td>' + splitProductQuota + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>' + '<td>' + '' + '</td>';
      contents += "</tr>";
    }

  });
});

contents += "</tr></table>";
jQuery('#contentNeed').append(contents);
&#13;
&#13;
&#13;

我创建了一个模拟JSON对象。