Neste documento mostramos como 'zebrar' as linhas de uma tabela com JavaScript.
Note que não importa o número de linhas da tabela elas serão zebradas corretamente.
| Vendedor | Total |
|---|---|
| Manoel | 12.300,00 |
| Joaquim | 21.300,00 |
| Maria | 13.200,00 |
| Marta | 32.100,00 |
| Antonio | 23.100,00 |
| Pedro | 31.200,00 |
<style>
.zebraon {
background: silver
}
</style>
<script>
window.onload = function () {
var zebrar = document.querySelectorAll('.zebra tbody tr')
for (var i = 0; i < zebrar.length; i += 2)
zebrar[i].className = 'zebraon'
}
</script>
<table class="zebra">
<thead>
<tr>
<th>Vendedor</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manoel</td>
<td>12.300,00</td>
</tr>
<tr>
<td>Joaquim</td>
<td>21.300,00</td>
</tr>
<tr>
<td>Maria</td>
<td>13.200,00</td>
</tr>
<tr>
<td>Marta</td>
<td>32.100,00</td>
</tr>
<tr>
<td>Antonio</td>
<td>23.100,00</td>
</tr>
<tr>
<td>Pedro</td>
<td>31.200,00</td>
</tr>
</tbody>
</table>