使用 CSS 或 JavaScript 隐藏表格中的特定行

debugcn 发表于 Dev

Rataiczak24

我有一个 HTML 表格的大纲，我通过 javascript 从在线数据集中将数据插入其中。Cell 0是包含信息的第一列。该列中的某些行的名称将显示在中，cell 0而某些行的名称将显示在中cell 0。我已经cell0在我的 javascript 中设置了一个类hide-dash。如何使用 CSS 或 JavaScript 来隐藏cell0等于破折号 (-) 的所有表格行？

JSFiddle 示例以更好地了解我需要什么。我需要隐藏破折号行：https : //jsfiddle.net/k8jr16j6/

HTML表格：

<table class="table table-borderless" id="top25">
  <tbody>
    <tr>
      <th>Customer</th>
      <th>Sales</th>
      <th>MGN $</th>
      <th>MGN %</th>
    </tr>
  </tbody>
</table>

JavaScript：

var customerTable = document.getElementById("top25");
var tableRow = customerTable.insertRow();
      var cell0 = tableRow.insertCell(0);
      cell0.style.textAlign = "left";
      cell0.innerHTML = row['account filter'];
      cell0.className='hide-dash';

      var cell1 = tableRow.insertCell(1);
      cell1.innerHTML = row['sales'];

      var cell2 = tableRow.insertCell(2);
      cell2.innerHTML = row['margin dollar'];

      var cell3 = tableRow.insertCell(3);
      cell3.innerHTML = row['margin percent'];

耶兹

var customerTable = document.getElementById("top25");
  var tableRow = customerTable.insertRow();
      var cell0 = tableRow.insertCell(0);
      cell0.style.textAlign = "left";
      cell0.innerHTML = row['account filter'];
      cell0.className='hide-dash';
      if (row['account filter'] == "-") tableRow.style.display="none";

      var cell1 = tableRow.insertCell(1);
      cell1.innerHTML = row['sales'];

      var cell2 = tableRow.insertCell(2);
      cell2.innerHTML = row['margin dollar'];

      var cell3 = tableRow.insertCell(3);
      cell3.innerHTML = row['margin percent'];

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。