I've been working with HTML tables, where I created a dynamic table split into four columns for display. Now, my task is to show 5 rows at a time on the screen using CSS. To achieve this, I'm populating the table in one go and refreshing the content every 5 seconds to display the next five rows until all data is loaded.
Approach Tried
var tableValue = [ // list of items and selling prices
...
];
myFun();
window.setInterval(showRows, 5000);
showRows();
function myFun() {
addTable(tableValue);
}
function showRows() {
$(".hidden:lt(5)").removeClass("hidden"); // hide previous 5 rows and show next five
}
function addTable(tableValue) {
var $tbl = $("<table />", { // create table
"class": "table"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden"
}); //adding class
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);
}tbody>tr>td {
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
white-space: nowrap;
}
.color1 {
background: #4AD184;
}
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="DisplayTable">
</div>Upon loading the page, the first 5 rows are displayed correctly. However, after 5 seconds, the next five rows render without hiding the first five rows.