JSFiddle - React, Tailwind, and code Playground

by dharmavir

HTML

<html>
<body>
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>

    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
</body>
</html>

CSS

.composer {
    color:blue;
}
.pieces {
    color:green;
}
.alt {
    background-color:#ddd;
}
body {
    font-family:tahoma
}
.rep td {
    padding:2px;
}

JavaScript

jQuery(document).ready(function()
{
    $('table.rep tbody > tr td:first-child').addClass('composer');
    $('table.rep tbody > tr td:last-child').addClass('pieces');
    $('table.rep').each(function()
    {
       //alert($(this).children('tbody').children(':odd').length)
       $(this).children('tbody').children(':odd').addClass('alt');
       //$(this).find('tr:odd').addClass('alt');
    });
    
});