JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<table>
    <tr><td> Row 1 </td></tr>
    <tr><td> Row 2 </td></tr>
    <tr><td> Row 3 </td></tr>
    <tr><td> Row 4 </td></tr>
    <tr><td> Row 5 </td></tr>
</table>
<table>
    <tr><td> Row 1 </td></tr>
    <tr><td> Row 2 </td></tr>
</table>
<table>
    <tr><td> Row 1 </td></tr>
    <tr><td> Row 2 </td></tr>
    <tr><td> Row 3 </td></tr>
    <tr><td> Row 4 </td></tr>
</table>
<table>
    <tr><td> Row 1 </td></tr>
    <tr><td> Row 2 </td></tr>
    <tr><td> Row 3 </td></tr>
</table>

CSS

table {
    border: 2px solid red;
    margin: 5px;
    float: left;
}

td {
    padding: 5px;
}

.even td {
    background-color: #eee;
}

.odd td {
    background-color: #ccc;
}

JavaScript

function alternate() {
    var tables = document.getElementsByTagName( 'table' );
    
    [].forEach.call( tables, function ( table ) {
        [].forEach.call( table.rows, function ( row, i ) {
            row.className = i % 2 ? 'even' : 'odd';
        });
    });  
}

alternate();