JSFiddle - React, Tailwind, and code Playground

by Rodmunera

HTML

<table>
    <colgroup id="col1">
        <col></col>
    </colgroup>
    <colgroup id="col2">
        <col></col>
    </colgroup>
    <thead>
        <tr id="headMasterRow_1" class="masterRow">
            <td>Tickets</td>
            <td>Revenue</td>
        </tr>
    </thead>
    <tbody>
        <tr id="bodyMasterRow_1" class="masterRow">
            <td>10 <a href="#" class="detailToggler">+</a></td>
            <td>$100.00</td>
        </tr>
        <tr id="bodyMasterRow_2" class="masterRow">
            <td>5 <a href="#" class="detailToggler">+</a></td>
            <td>$50.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr id="footMasterRow_1" class="masterRow">
            <td>15</td>
            <td>$150.00</td>
        </tr>
    </tfoot>
</table>

CSS

table
{
    border-spacing:0;
    border-collapse: collapse;
}
table td
{
    border:1px solid #000;
    padding:2px 10px;
}
tbody tr.masterRow
{
    background-color:#c7e7f2;
}
tbody tr.masterRow:nth-of-type(2n)
{
    background-color:#a9e7d2;
}
tbody tr.detailRow
{
    background-color:none;
}
tbody tr.detailRow:nth-of-type(2n+1)
{
    background-color:#ddd;
}
table colgroup#col2{
    background-color:#ffff00;
}

JavaScript

var newRows='<tr class="detailRow"><td>2</td><td>$20.00</td></tr><tr class="detailRow"><td>2</td><td>$20.00</td></tr><tr class="detailRow"><td>2</td><td>$20.00</td></tr><tr class="detailRow"><td>2</td><td>$20.00</td></tr><tr class="detailRow"><td>2</td><td>$20.00</td></tr>';

$(document).on('click','.detailToggler',function(e){
    e.preventDefault();
    var parentRow=$(this).closest('tbody .masterRow');
    var validParentRow=parentRow.attr('id');
    if(validParentRow!==undefined){ // make sure the insertion point exists
        parentRow.after(newRows);
    } else {
        console.error('Could not find parent row with class .masterRow');
    }
});