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>'
  );

var jqrajdate=''；
var jqrajtime=''；
var jqrajcity=''；
var jqrajdescription=''；
$.each（清单、函数（键3、值3）{
jqrajdate+=value3['manifest_date']；
jqrajtime+=value3['manifest_time']；
jqrajcity+=value3['city_name']；
jqrajdescription+=value3['manifest_description']；
});
$（'div#process'）。追加(
“Riwayat pengiriman”+
''+
''+
“唐格尔”+
“果酱”+
“科塔”+
“凯特兰根”+
''+
''+
''+
''+jqrajdate+''的+
''+jqrajtime+''的+
''+jqrajcity+''的+
“+jqrajdescription+”+
''+
''+
''
);

---

有人能帮我解决tr问题吗？

我假设您的

清单

是一个对象数组，包含关键字

清单日期

，

清单时间

，等等。在这种情况下，您这样做是错误的，因为您正在将所有值连接/折叠到单个变量中，然后打印单个元素。您需要做的是将所有逻辑移到

$.each（）

循环中

实际上，您不必使用

$each（）

，而是使用普通的

数组。prototype.forEach（）

应该可以工作。您需要做的是：

创建必要的标记，但将

元素保留为空

由于您使用相同的密钥访问数据，因此可以在数组中预先声明这些密钥，以便以后使用

循环浏览

清单中的所有条目。对于每个数据行，您可以：

创建一个新的
元素
循环遍历键（参见步骤2），对于您访问的每个键，您创建一个新的
元素，并将其附加到`元素
完成后，将
元素附加到表的
元素中

请参见下面的示例代码：

// 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);
});

//1。预先创建标记和空表
$（'div#process'）.append（'Riwayat pengiriman'+
''+
''+
“唐格尔”+
“果酱”+
“科塔”+
“凯特兰根”+
''+
''+
'');
// 2. 循环遍历数组中的所有项
var key=['manifest\u date'、'manifest\u time'、'city\u name'、'manifest\u description']；
manifest.forEach（函数（行）{
变量$row=$（''）；
键。forEach（功能（键）{
$row.append（“”+行[键]+“”）；
});
$（'#table tbody'）。追加（$row）；
});

概念验证示例：

//伪数据
变量清单=[{
“清单日期”：“日期1”，
“清单时间”：“时间1”，
“城市名称”：“城市1”，
“清单描述”：“Lorem ipsum dolor sit amet 1”
}, {
“清单日期”：“日期2”，
“清单时间”：“时间2”，
“城市名称”：“城市2”，
“清单描述”：“Lorem ipsum dolor sit amet 2”
}, {
“清单日期”：“日期3”，
“清单时间”：“时间3”，
“城市名称”：“城市3”，
“清单描述”：“Lorem ipsum dolor sit amet 3”
}];
// 1. 预先创建标记和空表
$（'div#process'）.append（'Riwayat pengiriman'+
'' +
'' +
“唐格尔”+
“果酱”+
“科塔”+
“凯特兰根”+
'' +
'' +
'');
// 2. 循环遍历数组中的所有项
var key=['manifest\u date'、'manifest\u time'、'city\u name'、'manifest\u description']；
manifest.forEach（函数（行）{
变量$row=$（''）；
键。forEach（功能（键）{
$row.append（“”+行[键]+“”）；
});
$（'#table tbody'）。追加（$row）；
});

上面写着
TypeError:keys.foreach不是一个函数
同一个错误
TypeError:keys.foreach不是一个函数
@mafortis请看我添加的概念验证代码片段，它按预期工作。如果缺少其他元素，请检查页面上的样式表或其他可能的影响因素。这当然超出了我的控制和预测。我们可以得到
$（'#table tbody'）。append（$row）除了#表，还有其他的吗？也许我在页面中的另一个表格会引起问题。我试图使用另一个id和类，但这导致我的表没有附加。@mafortis然后将它换成另一个id，很简单。