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>