【发布时间】：2019-05-29 00:56:51
【问题描述】：
我正在处理 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 秒后，接下来的五行正在呈现，但前五行没有隐藏。
【问题讨论】：
标签： javascript jquery css html-table