jQuery在tr中附加动态数据

Question

我正在尝试在表格中打印动态数据，我可以获取数据，但是tr中的tbody部分有问题

此数据中的每个数据都应在单独的tr中显示，但它们仅在1 tr中打印。

这是我的问题部分的代码

var jqrajdate = '';
var jqrajtime = '';
var jqrajcity = '';
var jqrajdescription = '';
$.each(manifest, function(key3, value3) {
  jqrajdate += value3['manifest_date'];
  jqrajtime += value3['manifest_time'];
  jqrajcity += value3['city_name'];
  jqrajdescription += value3['manifest_description'];
});
  $('div#proccess').append(
    '<div class="mb-20"><h4>Riwayat pengiriman</h4></div>'+
    '<table id="table" class="table table-bordered table-hover table-responsive">'+
    '<thead>'+
      '<th class="text-center">Tanggal</th>'+
      '<th class="text-center">Jam</th>'+
      '<th class="text-center">Kota</th>'+
      '<th class="text-center">Keterangan</th>'+
    '</thead>'+

    '<tbody>'+
      '<tr>'+
        '<td class="text-center">'+jqrajdate+'</td>'+
        '<td class="text-center">'+jqrajtime+'</td>'+
        '<td class="text-center">'+jqrajcity+'</td>'+
        '<td class="text-center">'+jqrajdescription+'</td>'+
      '</tr>'+
    '</tbody>'+
  '</table>'
  );

有人可以帮助我解决我的tr问题吗？

Answer 1

我假设您的manifest是对象数组，包含键manifest_date，manifest_time等。在这种情况下，您做错了，因为您将所有值合并/合并为一个变量，然后打印单个<tr>元素。您需要做的是将所有逻辑移至$.each()循环中。

您实际上不必使用.$each()，使用普通的Array.prototype.forEach()应该可以。您需要做的是：

1. 创建必要的标记，但将<tbody>元素留空
2. 由于您使用相同的键来访问数据，因此可以在数组中预先声明它们以供以后使用
3. 浏览manifest中的所有条目。对于每个数据行，您：
   • 创建一个新的<tr>元素
   • 遍历键（请参阅步骤2），并为您访问的每个键创建一个新的<td>元素并将其附加到`元素
   • 完成后，将<tr>元素附加到表的<tbody>元素

请参见下面的示例代码：

// 1. Create the markup and empty table beforehand
$('div#process').append('<div class="mb-20"><h4>Riwayat pengiriman</h4></div>'+
  '<table id="table" class="table table-bordered table-hover table-responsive">'+
  '<thead>'+
    '<th class="text-center">Tanggal</th>'+
    '<th class="text-center">Jam</th>'+
    '<th class="text-center">Kota</th>'+
    '<th class="text-center">Keterangan</th>'+
  '</thead>'+
  '<tbody></tbody>'+
  '</table>');

// 2. Loop through all entries in your array
var keys = ['manifest_date', 'manifest_time', 'city_name', 'manifest_description'];
manifest.forEach(function(row) {
  var $row = $('<tr />');

  keys.forEach(function(key) {
    $row.append('<td>' + row[key] + '</td>');
  });

  $('#table tbody').append($row);
});

概念验证示例：

// Dummy data
var manifest = [{
  'manifest_date': 'date1',
  'manifest_time': 'time1',
  'city_name': 'city1',
  'manifest_description': 'Lorem ipsum dolor sit amet 1'
}, {
  'manifest_date': 'date2',
  'manifest_time': 'time2',
  'city_name': 'city2',
  'manifest_description': 'Lorem ipsum dolor sit amet 2'
}, {
  'manifest_date': 'date3',
  'manifest_time': 'time3',
  'city_name': 'city3',
  'manifest_description': 'Lorem ipsum dolor sit amet 3'
}];

// 1. Create the markup and empty table beforehand
$('div#process').append('<div class="mb-20"><h4>Riwayat pengiriman</h4></div>' +
  '<table id="table" class="table table-bordered table-hover table-responsive">' +
  '<thead>' +
  '<th class="text-center">Tanggal</th>' +
  '<th class="text-center">Jam</th>' +
  '<th class="text-center">Kota</th>' +
  '<th class="text-center">Keterangan</th>' +
  '</thead>' +
  '<tbody></tbody>' +
  '</table>');

// 2. Loop through all entries in your array
var keys = ['manifest_date', 'manifest_time', 'city_name', 'manifest_description'];
manifest.forEach(function(row) {
  var $row = $('<tr />');

  keys.forEach(function(key) {
    $row.append('<td>' + row[key] + '</td>');
  });

  $('#table tbody').append($row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="process"></div>