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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
273
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Если вы хотите опубликовать ответ, пожалуйста, опубликуйте код и описание. В противном случае просто напишите в комментарии к ОП.

Funk Doc 28.05.2019 19:06

Я пытался оставить комментарий, но вам нужно 50 повторений, чтобы опубликовать комментарий к чужому сообщению.

Yuen Chun Hei 28.05.2019 19:08
Ответ принят как подходящий

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

эй, это нормально, но когда все данные загружены, я имею в виду, что через 5-5 секунд, когда загрузка данных завершена, я хочу снова запустить свое удовольствие

vivek singh 29.05.2019 07:05

Другие вопросы по теме