$('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')
<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>
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; }