如何間隔隱藏/顯示HTML表行

Question

我正在處理HTML表。 在這里，我制作了一個表格並分成四列以顯示在顯示屏上，該表格是完全動態的。

現在，我要做的是一次在屏幕上顯示5行。 我正在使用CSS來做到這一點。 我正在做的是一次創建表格並一次填充前5行； 然后5秒鍾后，內容將刷新，我必須顯示接下來的5行，直到所有數據加載完畢

我嘗試過的

 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> 

當我加載頁面時，它正在加載5行，這很完美，但是5秒鍾后，接下來的5行正在渲染，但是前5行沒有隱藏。

Answer 1

您需要跟蹤已顯示哪些行。 因此，創建一個新的CSS類，該類不同於“ hidden”，但也使用display: none 。 在這里，我使用了“已經顯示”。

在每個時間間隔上，將該類應用於所有未隱藏且尚未顯示的行。

 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

您的函數showRows（）僅刪除隱藏的類，而不會隱藏前五個類。 選擇器基於具有隱藏類的元素。 因此，即使您隱藏了前五個項目，它也只會再次顯示該五個項目。 解決此問題的簡單方法是給每個表行一個索引，並根據它們的索引隱藏項目，或者修改選擇器以選擇要顯示的五個。