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

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

您可以獲取所有包含帶有hide-dash類的單元格的行並將其隱藏：

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

您必須將整個行的顯示設置為無。 因此，將類“ hide-dash”添加到您創建的行中。

.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，您可以執行以下操作：

$（'。hide-dash'）。parent（）。hide（）;