发表新帖
发表新帖

How to Hide / Show Image on HTML page

前端 未结
关注
3 1962
天涯浪人
天涯浪人 2021-01-21 03:48

I am working with Dynamic HTML table in which I am showing my data as in HTML table as my data is in large amount so what I am doing is showing amount of data which will be fixe

3条回答
  • 有刺的猬
    有刺的猬 (楼主)
    2021-01-21 04:29

    Try this code. I have updated your hide image code.

    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 = $("", {
      "class": "table fixed"
    }),
    $tb = $(""),
    $trh = $("");

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

    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i], function(key, value) {
        if (typeof(value) === "number") {
          $("
    ", {
            "class": "text-right color" + (j + 1)
          }).html(value).appendTo($tr);
        } else {
          $("", {
            "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;
}
    

    


    

    



    
    
    
             
    
                                                        
    
            
            
    
              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              
    
                          
             
       
          
              
    
                                       
    

    

                
    
                         
          
                              			
        
        
        
    
          
    
            
            
    
              
              
    
            
    


                                 
              
    
            
    
                          
    

        
         
    
                
                
    
                  
                
    
                
    
                   看不清?
                
    
              
    
                                  
    
                    
   
                 
             
              
    提交回复
    
            
    
          
    
        
    
      
       
      
    
    
    
          
 
     
 
    
        
    热议问题