javascript - 如何每隔一段时间隐藏/显示 HTML 表格行
问题描述
我正在处理 HTML 表格。在这里，我制作了一个表格并分成四列显示在显示屏上，表格是完全动态的。
现在我要做的是在屏幕上一次显示 5 行。我正在使用 CSS 来做到这一点。我正在做的是一次创建表并一次填充前 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 秒后，接下来的五行正在呈现，但前五行没有隐藏。
解决方案
您需要跟踪已显示哪些行。因此，创建一个新的 CSS 类，它不同于“隐藏”，但也使用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>推荐阅读
- php - 注意：未定义索引：is_popup
- rider - Rider IDE - Razor 页面 HTML 突出显示？
- java - 错误：com.android.builder.dexing.DexArchiveBuilderException: 无法处理 ...\.gradle\caches\modules-2\files-2.1\javaee\javaee-api\5\
- hibernate - 无法设置从 Servlet 检索的 JSP 页面中的值
- python - 合并两个不同的日期时间列以形成一个序列
- c++ - 如何应用使默认构造函数有条件地显式？
- css - 元素 UI el-collapse 在前面如果其他组件
- javascript - Android Pie (9.0) 中的 Ionic 4 应用程序登录问题
- scala - 如何在没有 ExecutionContext.global 和 IOApp 的情况下在猫效果中使用计时器？
- scala - 我可以使用类的类型注释来决定类方法的结果类型吗？