Styling alternate rows using Javascript [duplicate]

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>

:nth-child(odd/even) ?

VXp
– VXp

2018-05-16 07:16:41 +00:00
Commented May 16, 2018 at 7:16 — VXp
– VXp, Commented May 16, 2018 at 7:16

CertainPerformance · Accepted Answer · 2018-05-16 07:20:50Z

8

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>

edited May 16, 2018 at 7:20

answered May 16, 2018 at 7:16

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

techie_28 Over a year ago

this is better than using JS

Rounin · Accepted Answer · 2018-05-16 07:33:45Z

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, 2018 at 7:33

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

2 Comments

Sami Kh Over a year ago

Both 'tr:nth-of-type(odd)' & 'tr:nth-child(odd)' work fine, what's the difference?

Rounin Over a year ago

A child is any child element. A type is only that element type. This can lead to different outcomes. If you take (for example): <div><p></p><p></p><ul></ul><p></p><p></p></div> 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.

Collectives™ on Stack Overflow

Styling alternate rows using Javascript [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related