觸發按鈕時如何顯示不同的表格數據？

Question

當使用 javascript/angularjs 觸發按鈕時，我試圖顯示不同的表數據。 我為每個表提供了一個唯一的 ID，當"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()方法，以及顯示/隱藏 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');
    }
  }
}

這將允許您遍歷所有表並根據它們的類打開或關閉它們。 如果正在顯示它，有.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();
    }
  }
}