时间戳

首页 > 解决方案 > jquery在tr中追加动态数据

javascript - jquery在tr中追加动态数据

问题描述

我正在尝试在表格中打印我的动态数据，我可以获取我的数据但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 问题？

标签： javascriptjquery

解决方案

我假设你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>

推荐阅读