JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<table id="table1">
    <tr class="rowHeaderClass"><td><span>+</span>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr class="rowHeaderClass"><td><span>+</span>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr class="rowHeaderClass"><td><span>+</span>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>    
</table>

CSS

.rowStripeClass{background:#fff}
.rowStripeAltClass{background:#c0c0c0}
.rowHeaderClass{background:#efefef}

JavaScript

$.fn.RowToggle = function(tableName, rowStripeClass, rowStripeAltClass, rowHeaderClass) {
    var plus = '<span>+</span>';
    var minus = '<span>-</span>';
    var idx = 0;
    var x = 0;

    $('#' + tableName + ' table tr').each(function(idx) {
        var cls = $(this).attr('class');
        if (cls === rowStripeAltClass || cls === rowStripeClass) {
            if (x > 0) { $(this).hide(); }
        } else if (cls === rowHeaderClass) {
            $(this).children(':first').prepend(x > 0 ? plus : minus);
            x++;
        }
    });

    $('#' + tableName + ' table tr.' + rowHeaderClass).each(function(idx) {
        var tr = $(this).nextAll('tr');
        for (i = 0; i < tr.length; i++) {
            var cls = $(tr[i]).attr('class');
            if (cls === rowStripeAltClass || cls === rowStripeClass) {
                if (idx === 0) { $(tr[i]).show(); }
            } else if (cls === rowHeaderClass) {
                return;
            }
        }
    });

    $('#' + tableName + ' table tr.' + rowHeaderClass).click(function() {
        $(this).find('span').replaceWith($(this).find('span').text().charAt(0) === '+' ? minus : plus);
        var tr = $(this).nextAll('tr');
        for (i = 0; i < tr.length; i++) {
            var cls = $(tr[i]).attr('class');
            if (cls === rowStripeAltClass || cls === rowStripeClass) {
                $(tr[i]).toggle();
            } else if (cls === rowHeaderClass) {
                return;
            }
        }
    });
};


$('#table1 tr:odd').addClass("rowStripeAltClass");
$('#table1 tr:even').addClass("rowStripeClass");
$('body').RowToggle('table1', 'rowStripeClass','rowStripeAltClass','rowHeaderClass');