如何对我的 html 进行后处理以折叠大表格？

Question

我的网页上有一个占位符，其中填充了文件之间匹配/不匹配的 html 表格。问题是页面中有很多数据需要滚动浏览，我想让每个表格都可以折叠。

也许在 html 表格上进行后期处理以折叠标题下的所有行，并且如果用户愿意，只需一个“+”按钮或其他东西来显示行。

如果可能，我想避免添加非原生 css 依赖项。

<br>
<label style="font-weight:bold;color:#c9d3e0"> Header1 </label>
<table>
   <tbody>
      <tr class="Header Row">
          <td> (bunch of td cells for length of columns) </td>
      </tr>
      <tr class="Matched Row">
          <td> (bunch of td cells for length of columns) </td>
      </tr>
      <tr class="Mismatched Row">
          <td> (bunch of td cells for length of columns) </td>
      </tr>
   < /tbody>
</table>
<br>

(repeat for dynamic N tables)

Answer 1

我已经调整并尝试增强我对其他问题 (Need of Recursive html table tree using only Javascript) 的回答，使其适用于您的数据示例：

function nextTr(row) {
  while ((row = row.nextSibling) && row.nodeType != 1);
  return row;
}

document.getElementById("myTable").addEventListener("click", function(e) {
  if (!e) return;
  if (e.target.tagName !== "A") return;
  e.preventDefault();
  
  var row = e.target.closest("tr");
  var cls = row.classList[0];
  var lvl = +(cls.slice(-1)) + 1;
  cls = cls.slice(0, -1) + lvl;

  while ((row = nextTr(row)) && (row.className.includes(cls) || row.className.includes("open")))
    row.classList.toggle("open");
    
});

// Select all the tr childs elements (all levels except 0)
var allChilds = document.querySelectorAll("tr:not([class*=level0])");
document.getElementById("openAll").addEventListener("click", function() {
  allChilds.forEach(function(elm){
    elm.classList.add("open");
  });
});
document.getElementById("closeAll").addEventListener("click", function() {
  allChilds.forEach(function(elm){
    elm.classList.remove("open");
  });
});

tbody tr {
  display: none;
}

th, td {
  padding: 4px 12px;
}

tr:first-of-type,
tr[class*="level0"],
tr.open {
  display: table-row;
}

tr[class*="level0"] th { background: #ccc; }
tr[class*="level1"] td { background: #ddd; }
tr[class*="level2"] td { background: #eee; }

<button id="openAll">+ All</button>
<button id="closeAll">- All</button>
<br>
<label style="font-weight:bold;color:#c9d3e0"> Header1 </label>
<table id="myTable">
  <tbody>
    <tr class="level0">
      <th><a>+/-</a></th><th>Header 1</th>
    </tr>
    <tr class="level1">
      <td></td><td>Match 1</td>
    </tr>
    <tr class="level1">
      <td></td><td>Match 2</td>
    </tr>
    <tr class="level0">
      <th><a>+/-</a></th><th>Header 2</th>
    </tr>
    <tr class="level1">
      <td></td><td>Match 1</td>
    </tr>
    <tr class="level1">
      <td><a>+/-</a></td><td>Match 2</td>
    </tr>
    <tr class="level2">
      <td></td><td>Match 2.1</td>
    </tr>
    <tr class="level0">
      <th><a>+/-</a></th><th>Header 3</th>
    </tr>
    <tr class="level1">
      <td></td><td>Match 1</td>
    </tr>
    <tr class="level1">
      <td></td><td>Match 2</td>
    </tr>
  </tbody>
</table>
<br>

使用此代码，您可以有多个级别。

如有任何意见，请随时发表评论。
我希望它对您有所帮助。