单击某个对象后如何展开/折叠整个 HTML 表格答案

【问题标题】：How to expand/collapse entire HTML table after clicking a certain object单击某个对象后如何展开/折叠整个 HTML 表格
【发布时间】：2020-06-12 23:38:09
【问题描述】：

我有一个如下的 html 脚本：

...
<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>
...

当我点击“发票登记”文本时，我想要展开或折叠整个 HTML 表格。如果我在表中有<h2>，我会使用解决方案here 并管理它，但找不到当前情况的解决方案。我该如何处理？请注意，<h2> 标记必须位于表格之外。任何帮助或建议将不胜感激。

【问题讨论】：

标签： javascript jquery html expand

【解决方案1】：

在这个h2之后找到下一个table，然后切换它？

$('h2').click(function () {
  $(this).nextAll('table').eq(0).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

<h2>Something else</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

奖金

如果您想要动画，请将您的表格包装在 div （table 元素无法动画）：

$('h2').click(function() {
  $(this).nextAll('.table-wrapper').eq(0).slideToggle(400);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>

<h2>Something else</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>

【讨论】：

这不能只是 $(this).next('table').toggle(); 而不是 nextAll 吗？
它可以在他提供的特定 HTML 示例中工作，因为next 返回下一个元素，如果它不匹配选择器则返回undefined。但是，如果他在h2 和table 之间添加内容，为了更加面向未来，我使用了nextAll，在这种情况下仍然可以使用

【解决方案2】：

向<h2> 添加一个单击处理程序，用于切换表格的显示。这是一个工作示例：https://jsfiddle.net/ob8p52n6/

【讨论】：

【解决方案3】：

如果您正在寻找动画展开/折叠类型的东西，您将需要更复杂的东西，但如果您只想显示/隐藏它，试试这个：

function showTable(tableName) {
  const tbl = document.getElementById(tableName);
  tbl.style.display = tbl.style.display === 'none' ? 
    'block' : 'none';
}

#mytable {
  display: none;
}

<h2 onclick="showTable('mytable')">Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>

【讨论】：

【解决方案4】：

您需要使用 javascript 来完成实际工作。您还需要“a”标签或按钮中的某些内容来触发 javascript。应该是这样的。顺便说一句，我还没有测试过。

<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>

<button onclick="myFunction()">Hide/Unhide</button>

<script>
function myFunction() {
  var x = document.getElementById("mytable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

【讨论】：