javascript - 如何以一定间隔隐藏/显示 HTML 表格行

标签 javascript jquery css html-table

我正在处理 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>

关于javascript - 如何以一定间隔隐藏/显示 HTML 表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56345863/

上一篇：html - 如何显示谷歌验证码？

下一篇：Javafx Css变量定义错误: Expected '<number>' while parsing 'font-size'

相关文章：

javascript - 获取 JSON 数组中前 5 个分数值

javascript - 在哪里可以找到有关 Javascript 引擎内部结构的信息？

javascript - 表格 UI 设置不正确

html - 如何将文本放置在与图像相同的高度

html - 如何将背景设置为网页的 50%？

javascript - 同一页面上的两个 jQuery 版本

javascript - Electron - preload.js 未加载并且在 Windows 10 上发生错误

jquery - fancybox 无法在 Firefox 中工作

javascript - $.getJSON 无法识别 JSON

html - 是否可以创建一个 html 表，该表在列或行中流动并相应地完全用 CSS 包装？

©2024 IT工具网  联系我们