How to hide/show HTML table rows at an interval

Question

I am working on HTML tables. Here I have made a table and split into four columns to show up on a display screen, the table is fully dynamic.

Now what I have to do is to show 5 rows at a time on the screen. I am using CSS to do that. What I am doing is creating table in one go and populating the first 5 rows at once; then after 5 seconds that content gets refreshed and I have to show next five rows this will go on until the all the data loads

What I have tried

 var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281.25 }, { "Item Name": "Kiwi martini", "SellingPrice": 281.25 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281.25 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281.25 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281.25 }, { "Item Name": "Sex on the beach", "SellingPrice": 281.25 }, { "Item Name": "Bull frog", "SellingPrice": 506.25 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393.75 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281.25 }, { "Item Name": "Whisky sour", "SellingPrice": 281.25 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337.5 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337.5 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247.5 }, { "Item Name": "Rose sangria", "SellingPrice": 247.5 }, { "Item Name": "By chance special ", "SellingPrice": 168.75 }, { "Item Name": "Made in heaven", "SellingPrice": 168.75 }, { "Item Name": "Strawberry delight", "SellingPrice": 168.75 }, { "Item Name": "DRAGON", "SellingPrice": 168.75 }, { "Item Name": "Mangochil ", "SellingPrice": 168.75 }, { "Item Name": "Cucumber cola", "SellingPrice": 168.75 }, { "Item Name": "Virgin mojito", "SellingPrice": 168.75 }, { "Item Name": "Virgin mary", "SellingPrice": 168.75 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168.75 }, { "Item Name": "CORONA", "SellingPrice": 438.75 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337.5 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157.5 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213.75 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "TESTING ITEM", "SellingPrice": 22 } ] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $tb = $("<tbody/>"), $trh = $("<tr/>"); var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden" }); //ading 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; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } .hidden { display: none; } 

 <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> 

When I am loading the page it is loading 5 rows which is perfect, but after 5 seconds next five rows are rendering but first five are not hiding.

Answer 1

You need to track which rows have already been shown. So, create a new CSS class which is different from "hidden", but also uses display: none . Here I've used "already-shown".

On each interval, apply that class to any rows that are not hidden and not already shown.

 var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281.25 }, { "Item Name": "Kiwi martini", "SellingPrice": 281.25 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281.25 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281.25 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281.25 }, { "Item Name": "Sex on the beach", "SellingPrice": 281.25 }, { "Item Name": "Bull frog", "SellingPrice": 506.25 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393.75 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281.25 }, { "Item Name": "Whisky sour", "SellingPrice": 281.25 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337.5 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337.5 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247.5 }, { "Item Name": "Rose sangria", "SellingPrice": 247.5 }, { "Item Name": "By chance special ", "SellingPrice": 168.75 }, { "Item Name": "Made in heaven", "SellingPrice": 168.75 }, { "Item Name": "Strawberry delight", "SellingPrice": 168.75 }, { "Item Name": "DRAGON", "SellingPrice": 168.75 }, { "Item Name": "Mangochil ", "SellingPrice": 168.75 }, { "Item Name": "Cucumber cola", "SellingPrice": 168.75 }, { "Item Name": "Virgin mojito", "SellingPrice": 168.75 }, { "Item Name": "Virgin mary", "SellingPrice": 168.75 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168.75 }, { "Item Name": "CORONA", "SellingPrice": 438.75 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337.5 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157.5 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213.75 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123.75 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202.5 }, { "Item Name": "TESTING ITEM", "SellingPrice": 22 } ] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applied $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // Then your previous code $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $tb = $("<tbody/>"), $trh = $("<tr/>"); var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden" }); //ading 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; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } /* added .already-shown to have the same properties as hidden */ .hidden, .already-shown { display: none; } 

 <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> 

Answer 2

Your function showRows() only removes class hidden, it won't hide the previous five. And your selector is based on the element that has hidden class. So, even though if you hid the previous five, it will just show that five items again. The easy way to fix this is giving each table row an index and hide item based on their index, or rework your selector to select which five you want to display.