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 i, j, tables, rows;
    
    tables = document.getElementsByTagName( 'table' );
    
    for ( i = 0; i < tables.length; i += 1 ) {
        rows = tables[i].rows;
        
        for ( j = 0; j < rows.length; j += 1 ) {
            rows[j].className = j % 2 ? 'even' : 'odd';
        }
    }    
}

alternate();