How can you display alternate row styles?

<div class="demo-container">
<table width="100%" border="0" cellspacing="1" cellpadding="4" id="demoTable">
 <tr>
  <th>Country</th>
  <th>Points</th>
 </tr>
 <tr>
  <td>Germany</td>
  <td>10</td>
 </tr>
 <tr>
  <td>Italy</td>
  <td>20</td>
 </tr>
 <tr>
 <td>Lichtenstein</td>
  <td>11</td>
 </tr>
 <tr>
  <td>Sweden</td>
  <td>12</td>
 </tr>
</table>
</div>

.demo-container {
  margin: 0 auto;
  max-width: 600px;
  padding: 2em;
}

.demo-container table {
  border-collapse: separate;
  border-spacing: 1px;
  border-radius: 6px;
}

.demo-container th,
.demo-container td {
  color: #fff;
  padding: .25em .5em;
  text-align: left;
}

.demo-container th {
  background: #3d4c53;
}

.demo-even {
  background: #e6772e;
}
.demo-odd {
  background: #f2af32;
}
.demo-container tr:first-child th:first-child {
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
}
.demo-container tr:first-child th:last-child {
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
}
.demo-container tr:last-child td:first-child {
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-left-radius: 6px;
}
.demo-container tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  border-bottom-right-radius: 6px;
}

<script>
$(function() {

 $('#demoTable').each(function() {

  $('tr:odd', this).addClass('demo-odd').removeClass('demo-even');
  $('tr:even', this).addClass('demo-even').removeClass('demo-odd');

 });
});
</script>