如何使用javascript隐藏/显示表格中的某些行[关闭]

Question

我需要动态隐藏/显示该表中的表行。我怎样才能用javascript做到这一点？我似乎无法弄清楚。

我正在使用 MS Dynamics 内的表格。此 html 由电源应用门户自动生成。我需要能够隐藏其数据名称属性上的行。

<div class="view-grid">
  <span aria-label="Kies één record en klik op Selecteren om door te gaan" tabindex="0">
    Kies één record en klik op Selecteren om door te gaan
  </span>
  <table aria-relevant="additions" role="grid" class="table table-fluid table-hover">
    <thead>
      <tr>
        <th scope="col" aria-readonly="true" style="width:5.141388174807198%;" class="sort-disabled" aria-label="Selecteren" data-th="<span class='fa fa-check' aria-hidden='true'></span> <span class='sr-only'>Selecteren</span>">
          <span class="fa fa-check" aria-hidden="true"></span> 
          <span class="sr-only">Selecteren</span>
        </th>
        <th scope="col" aria-readonly="true" style="width:17.737789203084834%;" class="sort-enabled">
          <a href="#" role="button" aria-label="Name" tabindex="0">
            Name<span class="sr-only sort-hint">. aflopend sorteren</span>
          </a>
        </th>
        <th scope="col" aria-readonly="true" style="width:77.12082262210797%;" class="sort-enabled">
          <a href="#" role="button" aria-label="Omschrijving" tabindex="0">
            Omschrijving<span class="sr-only sort-hint">. aflopend sorteren</span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody style="">
      <tr data-id="7b9cf41e-1189-ee11-8179-000d3adf6334" data-entity="ccp_vrijstellingcode" data-name="A2"></tr>
      <tr data-id="52689d1e-1189-ee11-8179-0022489a0604" data-entity="ccp_vrijstellingcode" data-name="A5"></tr>
      <tr data-id="0bd31822-1189-ee11-8179-0022489f9d46" data-entity="ccp_vrijstellingcode" data-name="X2"></tr>
    </tbody>
  </table>
</div>

我尝试使用 getElementsByClassName()

Answer 1

JavaScript 还是 CSS？

取决于表格行是每次动态生成还是保持不变。

如果是后者，你可以在 CSS 中使用

:nth-of-type()

。如果是前者，最简单的方法是为 JavaScript 要挂钩的每一行生成一个唯一标识符。

我使用的是自定义的

data-

属性，你可以使用 JS 或 CSS 来操作。