Styling alternate rows using Javascript

Question

I am trying to change background color of alternate rows of two tables using Javascript.

I am able to do it using below javascript but I'm sure there is a more efficient or short-cut way to select required child elements using CSS selectors. Can anyone help?

window.onload = function() {
  var elem = document.getElementsByTagName('table')
  for (let c = 0; c < elem.length; c++) {
    var childElem = elem[c].getElementsByTagName('tr');
    for (let d = 0; d < childElem.length; d = d + 2) {
      childElem[d].classList.add('alt');
    }
  }
}

tr {
  background-color: #fff;
}

.alt {
  background-color: #ccc;
}

<html>

<body>
  <h2>Online Tx</h2>
  <table>
    <tr>
      <td>As You Like It</td>
      <td>Comedy</td>
      <td></td>
    </tr>
    <tr>
      <td>All's Well that Ends Well</td>
      <td>Comedy</td>
      <td>1601</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>Tragedy</td>
      <td>1604</td>
    </tr>
    <tr>
      <td>Macbeth</td>
      <td>Tragedy</td>
      <td>1606</td>
    </tr>
    <tr>
      <td>Romeo and Juliet</td>
      <td>Tragedy</td>
      <td>1595</td>
    </tr>
  </table>
  <h2>Backend tx</h2>
  <table>
    <tr>
      <td>The Fair Youth</td>
      <td>1–126</td>
    </tr>
    <tr>
      <td>The Dark Lady</td>
      <td>127–152</td>
    </tr>
    <tr>
      <td>The Rival Poet</td>
      <td>78–86</td>
    </tr>
  </table>

</body>

</html>

CertainPerformance · Answer 1 · 2018-05-16T07:20:50.953

You can achieve it with pure CSS and :nth-child:

tr:nth-child(2n) {
  background-color: #eee;
}

tr:nth-child(2n + 1) {
  background-color: #ccc;
}

<h2>Online Tx</h2>
<table>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
  </tr>
  <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    <td>1604</td>
  </tr>
  <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    <td>1606</td>
  </tr>
  <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    <td>1595</td>
  </tr>
</table>
<h2>Backend tx</h2>
<table>
  <tr>
    <td>The Fair Youth</td>
    <td>1–126</td>
  </tr>
  <tr>
    <td>The Dark Lady</td>
    <td>127–152</td>
  </tr>
  <tr>
    <td>The Rival Poet</td>
    <td>78–86</td>
  </tr>
</table>

this is better than using JS – techie_28 May 16 '18 at 07:18 — techie_28, May 16 '18 at 07:18

score 1 · Answer 2 · answered May 16 '18 at 07:33

1

In CSS, simply use:

tr:nth-of-type(odd)

Working Example:

tr:nth-of-type(odd) {
background-color: rgb(191, 191, 191);
}

  <table>
    <tr>
      <td>As You Like It</td>
      <td>Comedy</td>
      <td></td>
    </tr>
    <tr>
      <td>All's Well that Ends Well</td>
      <td>Comedy</td>
      <td>1601</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>Tragedy</td>
      <td>1604</td>
    </tr>
    <tr>
      <td>Macbeth</td>
      <td>Tragedy</td>
      <td>1606</td>
    </tr>
    <tr>
      <td>Romeo and Juliet</td>
      <td>Tragedy</td>
      <td>1595</td>
    </tr>
  </table>

answered May 16 '18 at 07:33

Rounin

27,134
9
83
108

1

Both 'tr:nth-of-type(odd)' & 'tr:nth-child(odd)' work fine, what's the difference? – Sami Kh May 16 '18 at 07:49
A child is _any_ child element. A type is _only_ that element type. This can lead to different outcomes. If you take (for example): `
` and declare `p:nth-child(odd)`, it will select the first and the last paragraphs. Whereas if you declare `p:nth-of-type(odd)`, it will select the first and the third paragraphs. For preference, I _always_ use `:nth-of-type` unless I am very clear that I want `:nth-child`.
– Rounin May 16 '18 at 07:53

Styling alternate rows using Javascript

2 Answers2