Question

如何使用数组填充表格单元格。我只是不能正确正确地做到这一点。我在这里有输出的实际图像。只需单击Acutal Output。这是预期的输出Expected Output。

我的代码

$(function(){
    var a = '<?php echo $supp_dtl; ?>';
    a = JSON.parse(a);
      for (let i = 0; i < a.length; i++) {
      console.log(a[i].unit_price)
         for (let j = 0; j < a[i].unit_price.length; j++) {
           console.log('unit ' + a[i].unit_price[j] + 'total ' + a[i].total_amount[j])

    $('#supplier-table > tbody > ').not('#tr-td-1, #tr-td-2').append(
       '<td style="width: 60px;" class="ignore"><input style="width: 160px;" type="text" class="price number supp_num-" id="price-" value="'+a[i].unit_price[j]+'" ></td>'+
       '<td style="width: 60px;"><input style="width: 160px;" value="'+a[i].total_amount[j]+'" type="text" class="total" id="total-" readonly></td>'
    );

  }
 }                                      
});

此图像在控制台中显示。 Console.log

这是变量（a）的图像结果。 variable a

这里有人可以实现预期的输出吗？如您在帖子中所见。

Answer 1

解决方案1：

这将直接在数组结构上起作用。在继续之前，您需要确保已正确填充所有项目。请参阅我的解决方案2，以验证和填充空白数据。

http://jsfiddle.net/Ln4x9j58/

 var a = [
          {
          "supplier_name": "Glory",
          "total_amount":[5000, 1000],
          "unit_price":[2,200]
          },
          {
          "supplier_name": "Midtown",
          "total_amount":[10000, 1500],
          "unit_price":[4,300]
          },
          {
          "supplier_name": "Tower General",
          "total_amount":[7500, 500],
          "unit_price":[3,100]
          }
];
// Create table row for supplier name
tr = '<tr>';
for(var i = 0; i < a.length; i++){
 b = a[i];
 tr += '<td colspan="2">'+b.supplier_name+'</td>';
}
tr += '</tr>';
// populate it
jQuery("#pricing tbody").html(tr);

// calculate number of row required. Number of rows required is the length of unit_price
rowCount = a[0].unit_price.length
tr = '';
for(var i = 0; i < rowCount; i++){
tr += '<tr>';
for(var j =0; j <a .length; j++){
tr += '<td>'+'Unit price - '+j+'</td>'; // this is a test text which will be replaced
tr += '<td>'+'Total price - '+j+'</td>'; // this is a test text which will be replaced
}
tr += '</tr>';
}
jQuery("#pricing tbody").append(tr);// Populate the rows;

// Calculate the position of td on every tr and change the test text to value
for(var i =0; i < rowCount; i++){
 tdPosition = 0;
 for(var j=0; j < a.length; j++){
    jQuery("#pricing tbody")
      .find("tr:eq("+(i+1)+")")
      .find("td:eq("+tdPosition+")")
      .text(a[j].unit_price[i]);
      tdPosition++;
    jQuery("#pricing tbody")
      .find("tr:eq("+(i+1)+")")
      .find("td:eq("+tdPosition+")")
      .text(a[j].total_amount[i]);
      tdPosition++;
 }
}

Answer 2

解决方案2 ：（我更喜欢）

收集数组数组中的值并最终填充trs。

此代码可能看起来更长，因为要确保数据正确

http://jsfiddle.net/x9b0yLue/

var a = [
          {
          "supplier_name": "Glory",
          "total_amount":[5000, 1000],
          "unit_price":[2,200]
          },
          {
          "supplier_name": "Midtown",
          "total_amount":[10000, 1500],
          "unit_price":[4,300]
          },
          {
          "supplier_name": "Tower General",
          "total_amount":[7500, 500],
          "unit_price":[3,100]
          }
];

console.clear();

trs = [];

// verify all has names and equal length of unit_price and total_amount
lengthOfUnitPrice = 0; // This will be row count after supplier name
for(var i = 0; i< a.length; i++){
  b = a[i];
  if(!b.hasOwnProperty('supplier_name') || !b.supplier_name)   {
   b.supplier_name = "";
  }
  if(!b.hasOwnProperty('unit_price') || !b.unit_price.length)   {
   b.unit_price = [];
  }
  if(!b.hasOwnProperty('total_amount') || !b.total_amount.length)   {
   b.total_amount = [];
  }
  if(lengthOfUnitPrice < b.unit_price.length){
   lengthOfUnitPrice = b.unit_price.length;
  }
}
// verify all unit_price and total_amount are of equal length, if not pad empty string or -
for(var i = 0; i< a.length; i++){
 b = a[i];
 toPad = lengthOfUnitPrice - b.unit_price.length;
 for(var j = 0; j< toPad; j++){
   b.unit_price.push("");
 }
 toPad = lengthOfUnitPrice - b.total_amount.length;
 for(var j = 0; j< toPad; j++){
   b.total_amount.push("");
 }
}

// Collect values in array of array
supplier_names = a.map((b) => b.supplier_name);
trs = [];
for(var i = 0; i < lengthOfUnitPrice; i++){
 temp = [];
 for(var j =0; j < a.length; j++){
  b =a[j];
  temp.push(b.unit_price[i]);
  temp.push(b.total_amount[i])
 }
 trs.push(temp);
}
tr = '<tr>';

jQuery.each(supplier_names, function(index, name){
   tr += '<td colspan="2">'+name+'</td>'
});

tr += '</tr>';
jQuery.each(trs, function(index, row){
tr += '<tr>';

    jQuery.each(row, function(index, value){
     tr += '<td>'+value+'</td>'
  })
  tr += '</tr>';

})

jQuery("#pricing tbody").html(tr);

如何用数组填充单元格

2 个答案: