У меня есть таблица HTML, которую я отображаю с данными JSON, в соответствии с моим требованием я должен показывать данные в 4 столбцах, каков бы ни был размер данных.
Проблема
когда мой data.length поровну делится на 4, тогда он показывает две строки из четырех столбцов, но когда его длина равна 6, он показывает две строки из 3-3 столбцов, что неверно, если у меня есть данные, имеющие длину 5 тогда он показывает только 4 элемента, а не пятый, я не знаю, какую ошибку я делаю
Мой код
var tableValue = [{
"Item Name": "JACK DANIELS 30",
"Quantity": 292
}, {
"Item Name": "JACK DANIELS 750",
"Quantity": 731
}, {
"Item Name": "JAMESON 30",
"Quantity": 202
}, {
"Item Name": "JAMESON 750",
"Quantity": 49
}, {
"Item Name": "JIM BEAM WHITE 750",
"Quantity": 409
}]
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table table-striped table-bordered table-hover "
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4); // here i Think some issue
console.log(split)
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
"class": "filterData"
});
for (j = 0; j < 4; j++) {
$.each(tableValue[split * j + i], function(key, value) {
$("<td/>", {
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
});
}
$tr.appendTo($tb);
}
$tbl.append($tb);
$("#DisplayTable").html($tbl);
}
addTable(tableValue);.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>Здесь в моем JSON у меня всего Items, но он показывает только 4, я прокомментировал строку, где я думаю, что проблема в моем коде
