用封闭标签分组 html 表格行答案

【问题标题】：group html table rows with enclosing tag用封闭标签分组 html 表格行
【发布时间】：2018-03-13 23:32:58
【问题描述】：

我希望能够使用分配给它们的公共属性访问 html 表中的行子组 - 假设我希望使用 javascript 使一对行消失。如果它成功了，用 div 将这些行括起来并将该 div 分配给一个类将是完美的。

<table>
  <tbody>
    <tr>...</tr>
    <div class="hideme_sometimes">
      <tr>...</tr>
      <tr>...</tr>
    </div>
    <tr>...</tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){$("div.hideme_sometimes").hide();}); 
</script>

但显然您不能将表格的某些部分放在 div 或 span 中。是否有其他方法可以将 <tr> 元素分组以达到相同的效果？

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

在某些情况下，使用data-* attributes 可能会很方便。

同一组中的行可以分配相同的索引，例如：

<tr data-group-index="0">...</tr>

您可以使用 CSS 属性选择器选择一组行，例如：

document.querySelectorAll('tr[data-group-index="0"]')

选择<tr> 元素（如row）后，您可以使用getAttribute（和setAttribute）读取（和写入）属性值，也可以使用dataset property：

row.getAttribute('data-group-index') === row.dataset.groupIndex

【讨论】：

【解决方案2】：

您可以有多个可以围绕行的tbody 元素。

document.querySelector("button").addEventListener("click", function(){
    this.setAttribute("hidden", true)
    document.querySelectorAll("tbody")[1].removeAttribute("hidden")
});

<table>
  <thead>
    <tr>
      <th>foo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
  <tbody hidden>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
  </tbody>
</table>

<button type="button">more</button>

【讨论】：

是的，这就是我想要的。谢谢你。 <tbody> 元素可以被赋予 id 或 classes 并通过它访问。

【解决方案3】：

如何将class=hideme_sometimes 分配给每一行并调用$(".hideme_sometimes").hide();

【讨论】：

在这个特定的例子中它会起作用，但我真正的（更复杂的）问题更多是关于能够集体访问<tr>elements 的组，以及以任意方式访问每个组。因此，@epascarello 的回答最适合我的目的。对不起，如果我说得不清楚我的问题。

【解决方案4】：

你可以在它们上面加上class，然后按类查询，所以

$("div.hideme_sometimes").hide();

变成

$("tr.hideme_sometimes").hide();

【讨论】：