JSFiddle - React, Tailwind, and code Playground

by Jesse Baird

HTML

<p>
    <button>add a row</button>
</p>

<table class="ussr-table-striped">
    <tbody>
        <tr>
            <td>stripped</td>
        </tr>
        <tr>
            <td>
                <p>no stripe</p>
                <table class="ussr-table-striped">
                    <tbody>
                        <tr>
                            <td>stripped</td>
                        </tr>
                        <tr>
                            <td>no stripe     </td>
                        </tr>
                        <tr>
                            <td>stripped</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p>stripped</p>
                <table class="ussr-table-striped">
                    <tbody>
                        <tr>
                            <td>stripped</td>
                        </tr>
                        <tr>
                            <td>no stripe     </td>
                        </tr>
                        <tr>
                            <td>stripped</td>
                        </tr>
                    </tbody>
                </table>
            
            </td>
        </tr>
        <tr>
            <td>no stripe</td>
        </tr>
    </tbody>
</table>

CSS

table th,
table td {
    text-align: left;
    vertical-align: top;
    padding: 0.25em;
    background-color: #fff;
    font-size: 10px;
}

table table {
    margin-left: 3em;
}

/*
works for table table 

.ussr-table-striped > tbody tr:not(.test) tr:nth-child(odd) > td
*/
.ussr-table-striped > tbody > tr:not(.test):nth-of-type(odd) >  td

/*.ussr-table-striped > tbody tr:not(.test) tr:nth-child(odd) > td*/
{
/*    TODO: check this color with spec*/
    background-color: red;
}

JavaScript

$('button').click(function(){

var tr = $('tr:first').clone(true)
   
    tr.find('td').html('-------')
    
    tr.addClass('test')

    tr.insertAfter('tbody:first tr:first ')
    
    //console.log( tr )
    console.log($('.ussr-table-striped > tbody tr:not(.test) :nth-child(odd) > td'))
})
    .trigger('click')
    //.trigger('click')
    //.trigger('click')