点击某个对象后如何expand/collapse整个HTMLtable

Question

我有一个如下所示的 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>
...

我想要的是在单击 "Invoice Registers" 文本时展开或折叠 整个 HTML table。如果我在 table 中有 <h2>，我会使用解决方案 here 来解决这个问题，但找不到针对当前情况的解决方案。我该如何处理？请注意，<h2> 标签必须远离 table。如有任何帮助或建议，我们将不胜感激。

Answer 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>

Answer 2

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

Answer 3

如果您正在寻找动画 expand/collapse 类型的东西，您将需要更复杂的东西，但如果您只想 show/hide 它，试试这个：

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>

Answer 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>

点击某个对象后如何expand/collapse整个HTMLtable

How to expand/collapse entire HTML table after clicking a certain object

javascript

jquery

html

expand