javascript - 如何在 HTML 页面上隐藏/显示图像

标签 javascript jquery html css

我正在使用动态 HTML 表格,我在其中显示我的数据,就像在 HTML 表格中一样,因为我的数据量很大,所以我正在做的是显示将固定在一个屏幕上的数据量,所以我在这里一次显示 12 行,然后在 5 秒后页面刷新 hen next 12 等等,当它到达最后一页时,我正在做的是再次调用 JSON 对象并再次执行整个过程,因为在我的代码中,JSON 数据将是动态的

我面临的问题

  • 我已经完成了 5 秒后刷新页面并在到达最后一页时调用整个数据的所有操作
  • 现在我想做的是,当它是最后一页时,之后想要显示 image 10 seconds,然后再次调用整个过程<
  • 现在开始的整个过程就像表格将显示 12 行,如果有更多数据,它将显示表格的下 12 行,当它到达最后一页时,我想显示图像 10 秒,然后调用JSON对象再次经历整个过程
  • 在我的代码中,我注释了我在哪里做什么

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
}, {
  "Item Name": "Kiwi martini",
  "SellingPrice": 281
}, {
  "Item Name": " Apple gin",
  "SellingPrice": 225
}, {
  "Item Name": "Cucumber  cooler ",
  "SellingPrice": 281
}, {
  "Item Name": "Martini",
  "SellingPrice": 225
}, {
  "Item Name": "Pink lady",
  "SellingPrice": 225
}, {
  "Item Name": " Bloody marry",
  "SellingPrice": 281
}, {
  "Item Name": "Cosmopolitan",
  "SellingPrice": 281
}, {
  "Item Name": "Sex on the beach",
  "SellingPrice": 281
}, {
  "Item Name": "Bull frog",
  "SellingPrice": 506
}, {
  "Item Name": "Long  island iced tea ",
  "SellingPrice": 393
}, {
  "Item Name": "Pinacolada",
  "SellingPrice": 225
}, {
  "Item Name": "Daiquiri",
  "SellingPrice": 225
}, {
  "Item Name": "Mojito ",
  "SellingPrice": 281
}, {
  "Item Name": "Whisky sour",
  "SellingPrice": 281
}, {
  "Item Name": "Hot toddy",
  "SellingPrice": 225
}, {
  "Item Name": "Margarita",
  "SellingPrice": 337
}, {
  "Item Name": "Tequila sunrise",
  "SellingPrice": 337
}, {
  "Item Name": "Red sangria",
  "SellingPrice": 225
}, {
  "Item Name": "White sangria",
  "SellingPrice": 247
}, {
  "Item Name": "Rose sangria",
  "SellingPrice": 247
}, {
  "Item Name": "By chance special ",
  "SellingPrice": 168
}, {
  "Item Name": "Made in heaven",
  "SellingPrice": 168
}, {
  "Item Name": "Strawberry delight",
  "SellingPrice": 168
}, {
  "Item Name": "DRAGON",
  "SellingPrice": 168
}, {
  "Item Name": "Mangochil ",
  "SellingPrice": 168
}, {
  "Item Name": "Cucumber cola",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin mojito",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin mary",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin pinacolada",
  "SellingPrice": 168
}, {
  "Item Name": "CORONA",
  "SellingPrice": 438
}, {
  "Item Name": "CRAFT BEERS",
  "SellingPrice": 337
}, {
  "Item Name": "BIRA WHITE 330",
  "SellingPrice": 157
}, {
  "Item Name": "BIRA BLONDE 330",
  "SellingPrice": 135
}, {
  "Item Name": "BIRA STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "KINGFISHER PREMIUM 330",
  "SellingPrice": 123
}, {
  "Item Name": "KINGFISHER PREMIUM 650",
  "SellingPrice": 202
}, {
  "Item Name": "KINGFISHER STRONG 330",
  "SellingPrice": 135
}, {
  "Item Name": "KINGFISHER STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "KINGFISHER ULTRA 330",
  "SellingPrice": 146
}, {
  "Item Name": "KINGFISHER ULTRA 650",
  "SellingPrice": 281
}, {
  "Item Name": "KINGFISHER ULTRA MAX 330",
  "SellingPrice": 146
}, {
  "Item Name": "KINGFISHER ULTRA MAX 650",
  "SellingPrice": 281
}, {
  "Item Name": "BUDWIESER 330",
  "SellingPrice": 146
}, {
  "Item Name": "BUDWIESER 650",
  "SellingPrice": 270
}, {
  "Item Name": "BUDWIESER MAGNUM 330",
  "SellingPrice": 168
}, {
  "Item Name": "BUDWIESER MAGNUM 650",
  "SellingPrice": 281
}, {
  "Item Name": "TUBORG 330",
  "SellingPrice": 123
}, {
  "Item Name": "TUBORG 650",
  "SellingPrice": 191
}, {
  "Item Name": "TUBORG STRONG 330",
  "SellingPrice": 123
}, {
  "Item Name": "TUBORG STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "CRANBERRY ",
  "SellingPrice": 157
}, {
  "Item Name": "ORANGE",
  "SellingPrice": 157
}, {
  "Item Name": "JAMICAN",
  "SellingPrice": 157
}, {
  "Item Name": "BLACK BERRY",
  "SellingPrice": 157
}, {
  "Item Name": "BLUE BERRY",
  "SellingPrice": 157
}, {
  "Item Name": "MOET CHANDON",
  "SellingPrice": 787
}, {
  "Item Name": "SULA BRUT",
  "SellingPrice": 168
}, {
  "Item Name": "MATEUS ROSE",
  "SellingPrice": 213
}, {
  "Item Name": "HARDYS SIRAZ CABERNET 750",
  "SellingPrice": 189
}, {
  "Item Name": "HARDYS SIRAZ CABERNET BY GLASS",
  "SellingPrice": 382
}, {
  "Item Name": "JACOB CREEK SIRAZ 750",
  "SellingPrice": 180
}, {
  "Item Name": "JACOB CREEK SIRAZ BY GLASS",
  "SellingPrice": 360
}, {
  "Item Name": "BIG BANAYAN CHENNIN BLANC 750",
  "SellingPrice": 990
}, {
  "Item Name": "BIG BANAYAN CHENNI",
  "SellingPrice": 202
}, {
  "Item Name": "SULA CHENIN BLANC 750 ",
  "SellingPrice": 129
}, {
  "Item Name": "SULA CHENIN BLANC BY GLASS",
  "SellingPrice": 258
}, {
  "Item Name": "FOUR SEAZON CLASSIC",
  "SellingPrice": 112
}, {
  "Item Name": "FOUR SEAZON CLASSIC ",
  "SellingPrice": 225
}, {
  "Item Name": "BIG BANAYAN CARBINET ",
  "SellingPrice": 112
}, {
  "Item Name": "BIG BANAYAN CARBINE",
  "SellingPrice": 225
}, {
  "Item Name": "SULA SATORI MERLOT 750",
  "SellingPrice": 123
}, {
  "Item Name": "SULA SATORI MERLOT BY GLASS",
  "SellingPrice": 247
}, {
  "Item Name": "GROVERS LA RESERVE 750",
  "SellingPrice": 180
}, {
  "Item Name": "GROVERS LA RESERVE 100",
  "SellingPrice": 360
}, {
  "Item Name": "GLENFIDDICH 12 YEARS 700 ",
  "SellingPrice": 922
}, {
  "Item Name": "GLENFIDDICH 12 YEARS 30",
  "SellingPrice": 405
}, {
  "Item Name": "TALISKER 750",
  "SellingPrice": 877
}, {
  "Item Name": "TALISKER 30",
  "SellingPrice": 360
}, {
  "Item Name": "GLENNLIVET 750",
  "SellingPrice": 888
}, {
  "Item Name": "GLENNLIVET 30",
  "SellingPrice": 360
}, {
  "Item Name": "THE SINGLETON 750",
  "SellingPrice": 794
}, {
  "Item Name": "THE SINGLETON 30",
  "SellingPrice": 326
}, {
  "Item Name": "AMRUT FUSION 750",
  "SellingPrice": 506
}, {
  "Item Name": "AMRUT FUSION 30",
  "SellingPrice": 202
}, {
  "Item Name": "JACK DANIELS 750",
  "SellingPrice": 731
}, {
  "Item Name": "JACK DANIELS 30",
  "SellingPrice": 292
}, {
  "Item Name": "JIM BEAM WHITE 750",
  "SellingPrice": 409
}, {
  "Item Name": "JIM BEAM WHITE 30",
  "SellingPrice": 168
}, {
  "Item Name": "JAMESON 750",
  "SellingPrice": 49
}, {
  "Item Name": "JAMESON 30",
  "SellingPrice": 202
}, {
  "Item Name": "JW BLACK LABEL 750",
  "SellingPrice": 821
}, {
  "Item Name": "JW BLACK LABEL 200",
  "SellingPrice": 29
}, {
  "Item Name": "JW BLACK LABEL 30",
  "SellingPrice": 337
}, {
  "Item Name": "JW RED LABEL 200",
  "SellingPrice": 115
}, {
  "Item Name": "BALLENTINSE FINEST BLENDED 750",
  "SellingPrice": 454
}, {
  "Item Name": "BALLENTINSE FINEST BLENDED 30",
  "SellingPrice": 180
}, {
  "Item Name": "BLACK \u0026 WHITE 375",
  "SellingPrice": 157
}, {
  "Item Name": "BLACK \u0026 WHITE 180",
  "SellingPrice": 787
}, {
  "Item Name": "BLACK \u0026 WHITE 60",
  "SellingPrice": 258
}, {
  "Item Name": "BLACK \u0026 WHITE 30",
  "SellingPrice": 135
}, {
  "Item Name": "100 PIPERS 180",
  "SellingPrice": 787
}, {
  "Item Name": "100 PIPERS 60",
  "SellingPrice": 258
}, {
  "Item Name": "100 PIPERS 30",
  "SellingPrice": 135
}, {
  "Item Name": "VAT 69 180",
  "SellingPrice": 675
}, {
  "Item Name": "VAT 69 60",
  "SellingPrice": 225
}, {
  "Item Name": "VAT 69 30",
  "SellingPrice": 112
}, {
  "Item Name": "TEACHERS HIGHLAND 180",
  "SellingPrice": 787
}, {
  "Item Name": "TEACHERS HIGHLAND 60",
  "SellingPrice": 258
}, {
  "Item Name": "TEACHERS HIGHLAND 30",
  "SellingPrice": 135
}, {
  "Item Name": "TEACHERS 50 60",
  "SellingPrice": 393
}, {
  "Item Name": "TEACHERS 50 30",
  "SellingPrice": 202
}, {
  "Item Name": "BLACK DOG TRIPPLE GOLD 180",
  "SellingPrice": 121
}, {
  "Item Name": "BLACK DOG TRIPPLE GOLD 30",
  "SellingPrice": 213
}, {
  "Item Name": "BLACK DOG 8 YEARS 180",
  "SellingPrice": 731
}, {
  "Item Name": "BLACK DOG 8 YEARS 60",
  "SellingPrice": 247
}, {
  "Item Name": "BLACK DOG 8 YEARS 30",
  "SellingPrice": 123
}, {
  "Item Name": "BLENDERS PRIDE 750",
  "SellingPrice": 228
}, {
  "Item Name": "BLENDERS PRIDE 375",
  "SellingPrice": 114
}, {
  "Item Name": "BLENDERS PRIDE 180",
  "SellingPrice": 573
}, {
  "Item Name": "BLENDERS PRIDE 60",
  "SellingPrice": 191
}, {
  "Item Name": "BLENDERS PRIDE 30",
  "SellingPrice": 90
}, {
  "Item Name": "SIGNATURE 180",
  "SellingPrice": 450
}, {
  "Item Name": "SIGNATURE 60",
  "SellingPrice": 168
}, {
  "Item Name": "SIGNATURE 30",
  "SellingPrice": 90
}, {
  "Item Name": "GREY GOOSE 750",
  "SellingPrice": 819
}, {
  "Item Name": "GREY GOOSE 30",
  "SellingPrice": 326
}, {
  "Item Name": "BELVEDERE 700",
  "SellingPrice": 812
}, {
  "Item Name": "BELVEDERE 30",
  "SellingPrice": 360
}, {
  "Item Name": "CIROC 750",
  "SellingPrice": 742
}, {
  "Item Name": "CIROC 30",
  "SellingPrice": 303
}, {
  "Item Name": "ABSOLUT 750",
  "SellingPrice": 455
}, {
  "Item Name": "ABSOLUT 30",
  "SellingPrice": 191
}, {
  "Item Name": "SMIRNOFF RED 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF RED 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMIRNOFF RED30",
  "SellingPrice": 101
}, {
  "Item Name": "SMIRNOFF ORANGE 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF ORANGE 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMINOFF ORANGE30",
  "SellingPrice": 101
}, {
  "Item Name": "SMIRNOFF GREEN APPLE 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF GREEN APPLE 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMIRNOFF GREEN APPLE30",
  "SellingPrice": 101
}, {
  "Item Name": "BOMBAY SAPHIRE 750",
  "SellingPrice": 472
}, {
  "Item Name": "BOMBAY SAPHIRE 30",
  "SellingPrice": 191
}, {
  "Item Name": "BLUE RIBBAND 750",
  "SellingPrice": 877
}, {
  "Item Name": "BLUE RIBBAND 60",
  "SellingPrice": 78
}, {
  "Item Name": "BACCARDI WHITE 750",
  "SellingPrice": 248
}, {
  "Item Name": "BACCARDI WHITE 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI WHITE 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI WHITE 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI LEMON 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI LEMON 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI LEMON 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI ORANGE 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI ORANGE 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI LEMON 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI BLACK 180",
  "SellingPrice": 393
}, {
  "Item Name": "BACCARDI BLACK 30",
  "SellingPrice": 67
}, {
  "Item Name": "BACCARDI GOLD 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI GOLD30",
  "SellingPrice": 101
}, {
  "Item Name": "OLD MONK 180",
  "SellingPrice": 225
}, {
  "Item Name": "OLD MONK 90",
  "SellingPrice": 168
}, {
  "Item Name": "OLD MONK 60",
  "SellingPrice": 90
}, {
  "Item Name": "OLD MONK 30 ",
  "SellingPrice": 45
}, {
  "Item Name": "DON ANGEL 750",
  "SellingPrice": 466
}, {
  "Item Name": "DON ANGEL 30",
  "SellingPrice": 191
}, {
  "Item Name": "SAUZA SILVER 700",
  "SellingPrice": 615
}, {
  "Item Name": "SAUZA SILVER 30",
  "SellingPrice": 270
}, {
  "Item Name": "JAGERBOMB",
  "SellingPrice": 506
}, {
  "Item Name": "KAMAKAZI",
  "SellingPrice": 168
}, {
  "Item Name": "JAGERMASTER",
  "SellingPrice": 303
}, {
  "Item Name": "COINTTRAEU",
  "SellingPrice": 303
}, {
  "Item Name": "SAMBUCA",
  "SellingPrice": 258
}, {
  "Item Name": "KHALUA",
  "SellingPrice": 168
}, {
  "Item Name": "MARTINI BLANCO",
  "SellingPrice": 90
}, {
  "Item Name": "MARTINI ROSSO",
  "SellingPrice": 90
}, {
  "Item Name": "HENESSY VS 700",
  "SellingPrice": 787
}, {
  "Item Name": "HENESSY VS 30",
  "SellingPrice": 348
}, {
  "Item Name": "MORPHEUS 750",
  "SellingPrice": 218
}, {
  "Item Name": "MORPHEUS 180",
  "SellingPrice": 540
}, {
  "Item Name": "MORPHEUS 60",
  "SellingPrice": 191
}, {
  "Item Name": "MORPHEUS 30",
  "SellingPrice": 101
}, {
  "Item Name": "MANSION HOUSE 180",
  "SellingPrice": 292
}, {
  "Item Name": "MANSION HOUSE 90",
  "SellingPrice": 168
}, {
  "Item Name": "MANSION HOUSE 60",
  "SellingPrice": 90
}, {
  "Item Name": "MC BRANDY 60",
  "SellingPrice": 90
}, {
  "Item Name": "RED BULL ",
  "SellingPrice": 157
}, {
  "Item Name": "COKE",
  "SellingPrice": 45
}, {
  "Item Name": "SPRITE",
  "SellingPrice": 45
}, {
  "Item Name": "SODA",
  "SellingPrice": 33
}, {
  "Item Name": "DIET COKE",
  "SellingPrice": 56
}, {
  "Item Name": "TONIC WATER",
  "SellingPrice": 67
}, {
  "Item Name": "GINGER ALE",
  "SellingPrice": 67
}, {
  "Item Name": "LIME SODA",
  "SellingPrice": 45
}, {
  "Item Name": "LIME WATER",
  "SellingPrice": 45
}, {
  "Item Name": "PACKEGED WATER 1L",
  "SellingPrice": 39
}, {
  "Item Name": "MANSION HOUSE 650",
  "SellingPrice": 900
}, {
  "Item Name": "Chole Kulche",
  "SellingPrice": 80
}, {
  "Item Name": "Butter Nan",
  "SellingPrice": 65
}, {
  "Item Name": "Dhai",
  "SellingPrice": 20
}, {
  "Item Name": "Rice",
  "SellingPrice": 55
}, {
  "Item Name": "Plain rice",
  "SellingPrice": 30
}, {
  "Item Name": "MANSION HOUSE 650",
  "SellingPrice": 900
}, {
  "Item Name": "Chole Kulche",
  "SellingPrice": 80
}, {
  "Item Name": "Butter Nan",
  "SellingPrice": 65
}, {
  "Item Name": "Dhai",
  "SellingPrice": 20
}, {
  "Item Name": "Rice",
  "SellingPrice": 55
}, {
  "Item Name": "Plain rice",
  "SellingPrice": 30
}]

interval = '';

function initTable(tableValue) {
  addTable(tableValue)
  interval = window.setInterval(showRows, 3000);
}

initTable(tableValue);


function hideImage() {
  //  5000 = 5 seconds
  window.setInterval(doHide, 3000);
}

function doHide() {
  $("#displayImage").show() //this is here I am trying to show image
}




function showRows() {
  // Any TRs that are not hidden and not already shown get "already-shown" applies
  if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
  } else { // if it is the last row
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

    hideImage();
    //
    clearInterval(interval); //if last then clearing time interval and calling the function again 
    initTable(tableValue);
  }

  $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide previous  rows and show next 
}

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table fixed"
    }),
    $tb = $("<tbody/>"),
    $trh = $("<tr/>");

  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      class: "hidden "
    });

    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i], function(key, value) {
        if (typeof(value) === "number") {
          $("<td/>", {
            "class": "text-right color" + (j + 1)
          }).html(value).appendTo($tr);
        } else {
          $("<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: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">

  <img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>

编辑/更新

我已经编辑了我的代码片段,显示了一些代码图像,它显示在表格下方而不是最后一页之后,而且一旦显示它就不会隐藏然后它只显示

最佳答案

试试这段代码。我已经更新了你的隐藏图片代码。

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
}, {
  "Item Name": "Kiwi martini",
  "SellingPrice": 281
}, {
  "Item Name": " Apple gin",
  "SellingPrice": 225
}, {
  "Item Name": "Cucumber  cooler ",
  "SellingPrice": 281
}, {
  "Item Name": "Martini",
  "SellingPrice": 225
}, {
  "Item Name": "Pink lady",
  "SellingPrice": 225
}, {
  "Item Name": " Bloody marry",
  "SellingPrice": 281
}, {
  "Item Name": "Cosmopolitan",
  "SellingPrice": 281
}, {
  "Item Name": "the beach",
  "SellingPrice": 281
}, {
  "Item Name": "Bull frog",
  "SellingPrice": 506
}, {
  "Item Name": "Long  island iced tea ",
  "SellingPrice": 393
}, {
  "Item Name": "Pinacolada",
  "SellingPrice": 225
}, {
  "Item Name": "Daiquiri",
  "SellingPrice": 225
}, {
  "Item Name": "Mojito ",
  "SellingPrice": 281
}, {
  "Item Name": "Whisky sour",
  "SellingPrice": 281
}, {
  "Item Name": "Hot toddy",
  "SellingPrice": 225
}, {
  "Item Name": "Margarita",
  "SellingPrice": 337
}, {
  "Item Name": "Tequila sunrise",
  "SellingPrice": 337
}, {
  "Item Name": "Red sangria",
  "SellingPrice": 225
}, {
  "Item Name": "White sangria",
  "SellingPrice": 247
}, {
  "Item Name": "Rose sangria",
  "SellingPrice": 247
}, {
  "Item Name": "By chance special ",
  "SellingPrice": 168
}, {
  "Item Name": "Made in heaven",
  "SellingPrice": 168
}, {
  "Item Name": "Strawberry delight",
  "SellingPrice": 168
}, {
  "Item Name": "DRAGON",
  "SellingPrice": 168
}, {
  "Item Name": "Mangochil ",
  "SellingPrice": 168
}, {
  "Item Name": "Cucumber cola",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin mojito",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin mary",
  "SellingPrice": 168
}, {
  "Item Name": "Virgin pinacolada",
  "SellingPrice": 168
}, {
  "Item Name": "CORONA",
  "SellingPrice": 438
}, {
  "Item Name": "CRAFT BEERS",
  "SellingPrice": 337
}, {
  "Item Name": "BIRA WHITE 330",
  "SellingPrice": 157
}, {
  "Item Name": "BIRA BLONDE 330",
  "SellingPrice": 135
}, {
  "Item Name": "BIRA STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "KINGFISHER PREMIUM 330",
  "SellingPrice": 123
}, {
  "Item Name": "KINGFISHER PREMIUM 650",
  "SellingPrice": 202
}, {
  "Item Name": "KINGFISHER STRONG 330",
  "SellingPrice": 135
}, {
  "Item Name": "KINGFISHER STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "KINGFISHER ULTRA 330",
  "SellingPrice": 146
}, {
  "Item Name": "KINGFISHER ULTRA 650",
  "SellingPrice": 281
}, {
  "Item Name": "KINGFISHER ULTRA MAX 330",
  "SellingPrice": 146
}, {
  "Item Name": "KINGFISHER ULTRA MAX 650",
  "SellingPrice": 281
}, {
  "Item Name": "BUDWIESER 330",
  "SellingPrice": 146
}, {
  "Item Name": "BUDWIESER 650",
  "SellingPrice": 270
}, {
  "Item Name": "BUDWIESER MAGNUM 330",
  "SellingPrice": 168
}, {
  "Item Name": "BUDWIESER MAGNUM 650",
  "SellingPrice": 281
}, {
  "Item Name": "TUBORG 330",
  "SellingPrice": 123
}, {
  "Item Name": "TUBORG 650",
  "SellingPrice": 191
}, {
  "Item Name": "TUBORG STRONG 330",
  "SellingPrice": 123
}, {
  "Item Name": "TUBORG STRONG 650",
  "SellingPrice": 213
}, {
  "Item Name": "CRANBERRY ",
  "SellingPrice": 157
}, {
  "Item Name": "ORANGE",
  "SellingPrice": 157
}, {
  "Item Name": "JAMICAN",
  "SellingPrice": 157
}, {
  "Item Name": "BLACK BERRY",
  "SellingPrice": 157
}, {
  "Item Name": "BLUE BERRY",
  "SellingPrice": 157
}, {
  "Item Name": "MOET CHANDON",
  "SellingPrice": 787
}, {
  "Item Name": "SULA BRUT",
  "SellingPrice": 168
}, {
  "Item Name": "MATEUS ROSE",
  "SellingPrice": 213
}, {
  "Item Name": "HARDYS SIRAZ CABERNET 750",
  "SellingPrice": 189
}, {
  "Item Name": "HARDYS SIRAZ CABERNET BY GLASS",
  "SellingPrice": 382
}, {
  "Item Name": "JACOB CREEK SIRAZ 750",
  "SellingPrice": 180
}, {
  "Item Name": "JACOB CREEK SIRAZ BY GLASS",
  "SellingPrice": 360
}, {
  "Item Name": "BIG BANAYAN CHENNIN BLANC 750",
  "SellingPrice": 990
}, {
  "Item Name": "BIG BANAYAN CHENNI",
  "SellingPrice": 202
}, {
  "Item Name": "SULA CHENIN BLANC 750 ",
  "SellingPrice": 129
}, {
  "Item Name": "SULA CHENIN BLANC BY GLASS",
  "SellingPrice": 258
}, {
  "Item Name": "FOUR SEAZON CLASSIC",
  "SellingPrice": 112
}, {
  "Item Name": "FOUR SEAZON CLASSIC ",
  "SellingPrice": 225
}, {
  "Item Name": "BIG BANAYAN CARBINET ",
  "SellingPrice": 112
}, {
  "Item Name": "BIG BANAYAN CARBINE",
  "SellingPrice": 225
}, {
  "Item Name": "SULA SATORI MERLOT 750",
  "SellingPrice": 123
}, {
  "Item Name": "SULA SATORI MERLOT BY GLASS",
  "SellingPrice": 247
}, {
  "Item Name": "GROVERS LA RESERVE 750",
  "SellingPrice": 180
}, {
  "Item Name": "GROVERS LA RESERVE 100",
  "SellingPrice": 360
}, {
  "Item Name": "GLENFIDDICH 12 YEARS 700 ",
  "SellingPrice": 922
}, {
  "Item Name": "GLENFIDDICH 12 YEARS 30",
  "SellingPrice": 405
}, {
  "Item Name": "TALISKER 750",
  "SellingPrice": 877
}, {
  "Item Name": "TALISKER 30",
  "SellingPrice": 360
}, {
  "Item Name": "GLENNLIVET 750",
  "SellingPrice": 888
}, {
  "Item Name": "GLENNLIVET 30",
  "SellingPrice": 360
}, {
  "Item Name": "THE SINGLETON 750",
  "SellingPrice": 794
}, {
  "Item Name": "THE SINGLETON 30",
  "SellingPrice": 326
}, {
  "Item Name": "AMRUT FUSION 750",
  "SellingPrice": 506
}, {
  "Item Name": "AMRUT FUSION 30",
  "SellingPrice": 202
}, {
  "Item Name": "JACK DANIELS 750",
  "SellingPrice": 731
}, {
  "Item Name": "JACK DANIELS 30",
  "SellingPrice": 292
}, {
  "Item Name": "JIM BEAM WHITE 750",
  "SellingPrice": 409
}, {
  "Item Name": "JIM BEAM WHITE 30",
  "SellingPrice": 168
}, {
  "Item Name": "JAMESON 750",
  "SellingPrice": 49
}, {
  "Item Name": "JAMESON 30",
  "SellingPrice": 202
}, {
  "Item Name": "JW BLACK LABEL 750",
  "SellingPrice": 821
}, {
  "Item Name": "JW BLACK LABEL 200",
  "SellingPrice": 29
}, {
  "Item Name": "JW BLACK LABEL 30",
  "SellingPrice": 337
}, {
  "Item Name": "JW RED LABEL 200",
  "SellingPrice": 115
}, {
  "Item Name": "BALLENTINSE FINEST BLENDED 750",
  "SellingPrice": 454
}, {
  "Item Name": "BALLENTINSE FINEST BLENDED 30",
  "SellingPrice": 180
}, {
  "Item Name": "BLACK \u0026 WHITE 375",
  "SellingPrice": 157
}, {
  "Item Name": "BLACK \u0026 WHITE 180",
  "SellingPrice": 787
}, {
  "Item Name": "BLACK \u0026 WHITE 60",
  "SellingPrice": 258
}, {
  "Item Name": "BLACK \u0026 WHITE 30",
  "SellingPrice": 135
}, {
  "Item Name": "100 PIPERS 180",
  "SellingPrice": 787
}, {
  "Item Name": "100 PIPERS 60",
  "SellingPrice": 258
}, {
  "Item Name": "100 PIPERS 30",
  "SellingPrice": 135
}, {
  "Item Name": "VAT 69 180",
  "SellingPrice": 675
}, {
  "Item Name": "VAT 69 60",
  "SellingPrice": 225
}, {
  "Item Name": "VAT 69 30",
  "SellingPrice": 112
}, {
  "Item Name": "TEACHERS HIGHLAND 180",
  "SellingPrice": 787
}, {
  "Item Name": "TEACHERS HIGHLAND 60",
  "SellingPrice": 258
}, {
  "Item Name": "TEACHERS HIGHLAND 30",
  "SellingPrice": 135
}, {
  "Item Name": "TEACHERS 50 60",
  "SellingPrice": 393
}, {
  "Item Name": "TEACHERS 50 30",
  "SellingPrice": 202
}, {
  "Item Name": "BLACK DOG TRIPPLE GOLD 180",
  "SellingPrice": 121
}, {
  "Item Name": "BLACK DOG TRIPPLE GOLD 30",
  "SellingPrice": 213
}, {
  "Item Name": "BLACK DOG 8 YEARS 180",
  "SellingPrice": 731
}, {
  "Item Name": "BLACK DOG 8 YEARS 60",
  "SellingPrice": 247
}, {
  "Item Name": "BLACK DOG 8 YEARS 30",
  "SellingPrice": 123
}, {
  "Item Name": "BLENDERS PRIDE 750",
  "SellingPrice": 228
}, {
  "Item Name": "BLENDERS PRIDE 375",
  "SellingPrice": 114
}, {
  "Item Name": "BLENDERS PRIDE 180",
  "SellingPrice": 573
}, {
  "Item Name": "BLENDERS PRIDE 60",
  "SellingPrice": 191
}, {
  "Item Name": "BLENDERS PRIDE 30",
  "SellingPrice": 90
}, {
  "Item Name": "SIGNATURE 180",
  "SellingPrice": 450
}, {
  "Item Name": "SIGNATURE 60",
  "SellingPrice": 168
}, {
  "Item Name": "SIGNATURE 30",
  "SellingPrice": 90
}, {
  "Item Name": "GREY GOOSE 750",
  "SellingPrice": 819
}, {
  "Item Name": "GREY GOOSE 30",
  "SellingPrice": 326
}, {
  "Item Name": "BELVEDERE 700",
  "SellingPrice": 812
}, {
  "Item Name": "BELVEDERE 30",
  "SellingPrice": 360
}, {
  "Item Name": "CIROC 750",
  "SellingPrice": 742
}, {
  "Item Name": "CIROC 30",
  "SellingPrice": 303
}, {
  "Item Name": "ABSOLUT 750",
  "SellingPrice": 455
}, {
  "Item Name": "ABSOLUT 30",
  "SellingPrice": 191
}, {
  "Item Name": "SMIRNOFF RED 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF RED 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMIRNOFF RED30",
  "SellingPrice": 101
}, {
  "Item Name": "SMIRNOFF ORANGE 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF ORANGE 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMINOFF ORANGE30",
  "SellingPrice": 101
}, {
  "Item Name": "SMIRNOFF GREEN APPLE 180",
  "SellingPrice": 551
}, {
  "Item Name": "SMIRNOFF GREEN APPLE 60",
  "SellingPrice": 202
}, {
  "Item Name": "SMIRNOFF GREEN APPLE30",
  "SellingPrice": 101
}, {
  "Item Name": "BOMBAY SAPHIRE 750",
  "SellingPrice": 472
}, {
  "Item Name": "BOMBAY SAPHIRE 30",
  "SellingPrice": 191
}, {
  "Item Name": "BLUE RIBBAND 750",
  "SellingPrice": 877
}, {
  "Item Name": "BLUE RIBBAND 60",
  "SellingPrice": 78
}, {
  "Item Name": "BACCARDI WHITE 750",
  "SellingPrice": 248
}, {
  "Item Name": "BACCARDI WHITE 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI WHITE 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI WHITE 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI LEMON 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI LEMON 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI LEMON 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI ORANGE 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI ORANGE 60",
  "SellingPrice": 202
}, {
  "Item Name": "BACCARDI LEMON 30",
  "SellingPrice": 101
}, {
  "Item Name": "BACCARDI BLACK 180",
  "SellingPrice": 393
}, {
  "Item Name": "BACCARDI BLACK 30",
  "SellingPrice": 67
}, {
  "Item Name": "BACCARDI GOLD 180",
  "SellingPrice": 585
}, {
  "Item Name": "BACCARDI GOLD30",
  "SellingPrice": 101
}, {
  "Item Name": "OLD MONK 180",
  "SellingPrice": 225
}, {
  "Item Name": "OLD MONK 90",
  "SellingPrice": 168
}, {
  "Item Name": "OLD MONK 60",
  "SellingPrice": 90
}, {
  "Item Name": "OLD MONK 30 ",
  "SellingPrice": 45
}, {
  "Item Name": "DON ANGEL 750",
  "SellingPrice": 466
}, {
  "Item Name": "DON ANGEL 30",
  "SellingPrice": 191
}, {
  "Item Name": "SAUZA SILVER 700",
  "SellingPrice": 615
}, {
  "Item Name": "SAUZA SILVER 30",
  "SellingPrice": 270
}, {
  "Item Name": "JAGERBOMB",
  "SellingPrice": 506
}, {
  "Item Name": "KAMAKAZI",
  "SellingPrice": 168
}, {
  "Item Name": "JAGERMASTER",
  "SellingPrice": 303
}, {
  "Item Name": "COINTTRAEU",
  "SellingPrice": 303
}, {
  "Item Name": "SAMBUCA",
  "SellingPrice": 258
}, {
  "Item Name": "KHALUA",
  "SellingPrice": 168
}, {
  "Item Name": "MARTINI BLANCO",
  "SellingPrice": 90
}, {
  "Item Name": "MARTINI ROSSO",
  "SellingPrice": 90
}, {
  "Item Name": "HENESSY VS 700",
  "SellingPrice": 787
}, {
  "Item Name": "HENESSY VS 30",
  "SellingPrice": 348
}, {
  "Item Name": "MORPHEUS 750",
  "SellingPrice": 218
}, {
  "Item Name": "MORPHEUS 180",
  "SellingPrice": 540
}, {
  "Item Name": "MORPHEUS 60",
  "SellingPrice": 191
}, {
  "Item Name": "MORPHEUS 30",
  "SellingPrice": 101
}, {
  "Item Name": "MANSION HOUSE 180",
  "SellingPrice": 292
}, {
  "Item Name": "MANSION HOUSE 90",
  "SellingPrice": 168
}, {
  "Item Name": "MANSION HOUSE 60",
  "SellingPrice": 90
}, {
  "Item Name": "MC BRANDY 60",
  "SellingPrice": 90
}, {
  "Item Name": "RED BULL ",
  "SellingPrice": 157
}, {
  "Item Name": "COKE",
  "SellingPrice": 45
}, {
  "Item Name": "SPRITE",
  "SellingPrice": 45
}, {
  "Item Name": "SODA",
  "SellingPrice": 33
}, {
  "Item Name": "DIET COKE",
  "SellingPrice": 56
}, {
  "Item Name": "TONIC WATER",
  "SellingPrice": 67
}, {
  "Item Name": "GINGER ALE",
  "SellingPrice": 67
}, {
  "Item Name": "LIME SODA",
  "SellingPrice": 45
}, {
  "Item Name": "LIME WATER",
  "SellingPrice": 45
}, {
  "Item Name": "PACKEGED WATER 1L",
  "SellingPrice": 39
}, {
  "Item Name": "MANSION HOUSE 650",
  "SellingPrice": 900
}, {
  "Item Name": "Chole Kulche",
  "SellingPrice": 80
}, {
  "Item Name": "Butter Nan",
  "SellingPrice": 65
}, {
  "Item Name": "Dhai",
  "SellingPrice": 20
}, {
  "Item Name": "Rice",
  "SellingPrice": 55
}, {
  "Item Name": "Plain rice",
  "SellingPrice": 30
}, {
  "Item Name": "MANSION HOUSE 650",
  "SellingPrice": 900
}, {
  "Item Name": "Chole Kulche",
  "SellingPrice": 80
}, {
  "Item Name": "Butter Nan",
  "SellingPrice": 65
}, {
  "Item Name": "Dhai",
  "SellingPrice": 20
}, {
  "Item Name": "Rice",
  "SellingPrice": 55
}, {
  "Item Name": "Plain rice",
  "SellingPrice": 30
}]

interval = '';

function initTable(tableValue) {
  addTable(tableValue)
  interval = window.setInterval(showRows, 3000);
}

initTable(tableValue);


function hideImage() {
    $("#displayImage").show(); //this is here I am trying to show image
  $("#DisplayTable").hide();
  
  setTimeout(function(){
    initTable(tableValue);
  },10000);
}





function showRows() {
  // Any TRs that are not hidden and not already shown get "already-shown" applies
  if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
  $("#displayImage").hide(); //this is here I am trying to show image
  $("#DisplayTable").show();
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
  } else { // if it is the last row
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

    hideImage();
    //
    clearInterval(interval); //if last then clearing time interval and calling the function again 
  }

  $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide previous  rows and show next 
}

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table fixed"
    }),
    $tb = $("<tbody/>"),
    $trh = $("<tr/>");

  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      class: "hidden "
    });

    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i], function(key, value) {
        if (typeof(value) === "number") {
          $("<td/>", {
            "class": "text-right color" + (j + 1)
          }).html(value).appendTo($tr);
        } else {
          $("<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: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">

  <img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>

关于javascript - 如何在 HTML 页面上隐藏/显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56422075/

相关文章:

javascript - 关于从 DOM 对象中 trim 大量文本的建议

jQuery:Flexslider 标题不起作用 + 我页面最左侧的额外空间?

javascript - PHP - GET url 忽略换行符

javascript - 如何动态检索输入类型 "url"的值并将其放入变量中?

javascript - Universal Analytics - 多作者报告、自定义维度

javascript - 如何删除没有拼接且没有未定义剩余的数组元素?

javascript - jQuery UI slider - 已预定义 'pips'

javascript - 将 jquery 插件转换为指令 Angular

javascript - 在新窗口中打开页面上的 div,同时保持通过 websocket 更新它的能力

javascript - 隐藏父 div 溢出时滚动不起作用