JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
    <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
    </tr>
</table>

CSS

.bg-gray {
    background: #eee;
}

table {
    width: 100%;
}

tr {
    cursor: pointer;
}

JavaScript

$j = jQuery.noConflict();

$j(".table").on('click', 'td', function() {
      $j(this).parent().toggleClass('bg-gray');
});