[英]jquery append dynamic data in tr
I'm trying to print my dynamic data in table, i can get my data but tr
part in tbody
has issue 我想打印在表格我的动态数据,我可以得到我的数据,但tr
部分tbody
有问题
each one of this data should show in separate tr but they all print in 1 tr only. 此数据中的每个数据都应在单独的tr中显示,但它们都只能在1 tr中打印。
This is the code of my issue part 这是我的问题部分的代码
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>'
);
Can anyone help me with fixing my tr issues? 谁能帮助我解决我的tr问题?
I assume that your manifest
is an array of objects, containing the keys manifest_date
, manifest_time
, and etc. In this case, you are doing it incorrectly because you are concatenating/collapsing all values into a single variable and then printing a single <tr>
element. 我假设您的manifest
是一个对象数组,包含键manifest_date
, manifest_time
等。在这种情况下,您做错了,因为您将所有值串联/折叠为一个变量 ,然后打印一个<tr>
元件。 What you need to do is to move all that logic into the the $.each()
loop instead. 您需要做的是将所有逻辑移到$.each()
循环中。
You don't actually have to use .$each()
, using a normal Array.prototype.forEach()
should work. 您实际上不必使用.$each()
,使用正常的Array.prototype.forEach()
应该可以工作。 What you need to do is: 您需要做的是:
<tbody>
element empty 创建必要的标记,但将<tbody>
元素保留为空 manifest
. 遍历manifest
所有条目。 For each data row, you: 对于每个数据行,您:
<tr>
element 创建一个新的<tr>
元素 <td>
element and append it to the ` element 遍历键(请参阅步骤2),并为您访问的每个键创建一个新的<td>
元素并将其附加到`元素 <tr>
element to your table's <tbody>
element 完成后,将<tr>
元素附加到表的<tbody>
元素中 See sample code below: 请参见下面的示例代码:
// 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);
});
Proof-of-concept example: 概念验证示例:
// 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.