JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

вложенные таблицы:
<table class="clickable">
    <tr>
        <td>1</td>
        <td>a</td>
        <td>d</td>
        <td>a</td>
    </tr>
    <tr>
        <td>2</td>
        <td>a</td>
        <td>d</td>
        <td>a</td>
    </tr>
    <tr>
        <td>3</td>
        <td>a</td>
        <td>d</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>a</td>
        <td>
            <div style="margin: 10px">
                <table class="clickable">
                    <tr>
                        <td>1</td>
                        <td>a</td>
                        <td>d</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>a</td>
                        <td>d</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>a</td>
                        <td>d</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>a</td>
                        <td>d</td>
                        <td>a</td>
                    </tr>
                </table>
            </div>
        </td>
        <td>a</td>
    </tr>
</table>

CSS

.clickable tr {
    background: yellow;
}
.clickable tr td {
    margin: 0;
    padding: 0;
    border: 0;
}
.clickable tr:nth-child(even) {
    background: blue;
    color: white;
}
.clickable > tbody > tr > td.active {
    background: red;
    color: black;
}
.clickable .clickable td.active {
    background: green;
    color: white;
}
}

JavaScript

$('.clickable > tbody > tr > td').click(function () {
    $(this).addClass('active').parents('.clickable').children('tbody').find('> tr > td.active').not(this).removeClass('active');
});