Question

我在这里有一个演示 JsFiddle。

我创建了一个表，并从数据库中获取数据并放入一个数组中。我想要的是根据供应商名称（请参见演示）动态填充表格单元格。所以我似乎找不到/尝试任何解决方案。

这是我的数组数据：

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]
          }
];

Answer 1

您应该找到tr行，然后附加数据。

http://jsfiddle.net/oxfyvpu2/

jQuery.each(trs, function(index, row){
    tr = '';
    jQuery.each(row, function(index, value){
     tr += '<td>'+value+'</td>'
  })
  var row = jQuery("#pricing > tbody tr")[index];
  jQuery(row).append(tr);

})

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;
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);
}


//console.log(jQuery("#pricing > tbody tr"));
jQuery.each(trs, function(index, row){
	tr = '';
	jQuery.each(row, function(index, value){
     tr += '<td>'+value+'</td>'
  })
  var row = jQuery("#pricing > tbody tr")[index];
  jQuery(row).append(tr);

})

//jQuery("#pricing > tbody ").append(tr);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pricing" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th colspan='2'>Glory</th>
      <th colspan='2'>Midtown</th>
      <th colspan='2'>Tower General</th>
    </tr>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
      <th>Price</th>
      <th>Total</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tbody-tr">
      <td>Apple</td>
      <td>2500</td>
    </tr>
    <tr class="tbody-tr">
      <td>Banana</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

使用JavaScript调整td或tr位置

1 个答案: