Как скрыть / показать строки таблицы HTML с интервалом - PullRequest
Новая
       6

Как скрыть / показать строки таблицы HTML с интервалом

0 голосов
/ 28 мая 2019

Я работаю над таблицами 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 секунд рендерится следующие пять строк, но первые пять не скрываются.

Ответы [ 2 ]

2 голосов
/ 28 мая 2019

Вам необходимо отследить, какие строки уже были показаны.Итак, создайте новый класс 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>
0 голосов
/ 28 мая 2019

Ваша функция showRows () удаляет только скрытый класс, но не скрывает предыдущие пять.И ваш селектор основан на элементе, который имеет скрытый класс.Таким образом, даже если вы спрятали предыдущие пять, они просто покажут эти пять элементов снова.Самый простой способ исправить это - дать каждой строке таблицы индекс и скрыть элемент на основе их индекса, или переделать селектор, чтобы выбрать, какую из пяти вы хотите отобразить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...