SO-57709774

by David Thomas

HTML

<table>
  <tbody>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td class="hide">cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td class="hide">cell 2</td>
      <td>cell 3</td>
      <td class="hide">cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td class="hide">cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td class="hide">cell 1</td>
      <td class="hide">cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td class="hide">cell 1</td>
      <td class="hide">cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
  </tbody>
</table>

CSS

/* relevant for demo */
.hide {
  background-color: limegreen;
  opacity: 0.5;
}

.hideRow {
  opacity: 0.5;
}

/* relevant for visual information: */
tbody {
  counter-reset: rowCount;
}

tr {
  counter-increment: rowCount;
  counter-reset: hideCells;
}

td {
  border-bottom: 1px solid #000;
}

td.hide {
  counter-increment: hideCells;
}

tr::before,
tr::after {
  display: table-cell;
  padding: 0.5em;
  border-bottom: 1px solid #000;
}

tr::before {
  content: 'Row 'counter(rowCount);
}

tr::after {
  content: 'Row has 'counter(hideCells) ' td.hide elements';
}

/* simple reset/presentation: */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
}

td {
  padding: 0.5em;
}

JavaScript

$('tr').toggleClass(function(a, b) {
  return this.querySelectorAll('.hide').length > 1 ? 'hideRow' : '';
});