Как вы показываете разные данные таблицы при нажатии кнопки?

Question

Я пытаюсь показать разные данные таблицы, когда кнопка запускается с помощью javascript / angularjs. Я дал уникальный идентификатор для каждой таблицы, и я хотел бы показать конкретную таблицу c при нажатии кнопки "next".

В настоящее время я использую функцию .show() и .hide(), которая позволяет отображать только 2 табличных данных. У кого-нибудь есть такие методы как зацикливание? Спасибо!

В моем файле javaScript:

 <button type="button" id="nextbtn" class="btn btn-primary" onclick="addDataTable1(), addDataTable2(), addDataTable3()">Next</button>

В моем теге скрипта:

 function next(){
   $(".table1Data").hide();
   $(".table2Data").show();

Answer 1

Предполагая, что у вас есть класс table, или как вы предпочитаете его называть, метод toggle() и классы show / hide css, вы можете сделать что-то вроде этого:

function toggle() {
  var tables = document.querySelectorAll('.table');

  for (var i in tables) {
    if (tables[i].classList.contains('show')) {
      tables[i].classList.add('hide');
      tables[i].classList.remove('show');
    } else {
      tables[i].classList.add('show');
      tables[i].classList.remove('hide');
    }
  }
}

Это позволит вам l oop на все ваши таблицы и включать или выключать их в зависимости от их класса. Если он показывается, имеет класс .show, то вы скрываете его с помощью .hide и наоборот. Тот же пример с .hide() и .show()

function toggle() {
  var tables = document.querySelectorAll('.table');

  for (var i in tables) {
    if (tables[i].classList.contains('show')) {
      tables[i].hide();
    } else {
      tables[i].show();
    }
  }
}