触发按钮时如何显示不同的表格数据？

Posted 2023-05-09

【中文标题】触发按钮时如何显示不同的表格数据？

【英文标题】：How do you show different table data when button is triggered?

【发布时间】：2020-04-24 13:08:11

【问题描述】：

我试图在使用 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();

【问题讨论】：

您是否尝试为按钮的 onclick 事件添加事件处理程序？

是的，我已经添加了

您能否分享该代码，以便我们帮助您解决问题所在？

我重新表述了我的问题，希望它更容易理解。

您能分享一下您正在使用的代码吗？这样可以更轻松地为您提供帮助。

【参考方案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();
    
  

【讨论】：

抱歉回复晚了，但包含部分对我来说并不适用，因为并非所有表格都包含显示。在我的帖子中查看我更新的问题。感谢您的帮助！