Question

我在HTML中有一个表格的大纲，我通过在线数据集中的javascript将数据插入其中。 Cell 0是第一个包含信息的列。该列中的某些行将在cell 0中显示一个名称，而某些行将在cell 0中显示一个短划线（ - ）。我在我的javascript中为cell0设置了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'];

Answer 1

您可以获取包含类隐藏破折号的单元格的所有行并隐藏它们：

var columsHide = customerTable.getElementsByClassName('hide-dash');
Array.prototype.forEach.call(columsHide, function(el) {
            el.parentElement.style.display = "none";
});

Answer 2

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'];

Answer 3

如果您将单元格赋予类hide-dash，则可以使用css更改可见性：

hide-dash {
    visibility: hidden;
}

Answer 4

您必须将整行的显示设置为none。所以添加课程＆＃39; hide-dash＆＃39;到你创建的那一行。

.hide-dash {
  display: none;
}


<table>
  <tr class='hide-dash'>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>

  </tr>
</table>

https://jsfiddle.net/fhrpv81a/1/

更新

使用jQuery，你可以这样做：

$（＆＃39; .hide划线＆＃39）。亲本（）隐藏（）;

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

4 个答案: