JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table>
        <tr>
            <th>Title</th>
            <th>Category</th>
        </tr>
        <tr>
            <td>As your like it</td>
            <td>Comedy</td>
        </tr>
        <tr>
            <td>All well</td>
            <td>Comedy</td>
        </tr>
        <tr>
            <td>Henry IV Part 1</td>
            <td>Tragely</td>
        </tr>
        <tr>
            <td>Henry V</td>
            <td>Tragely</td>
        </tr>
    </table>
</body>

CSS

.table-heading{
          text-align:left;
          background-color:#6C6; /*green for table heading*/
      }     
      .odd{
          background-color:#ffc; /*pale yellow for odd row*/
      }
      .even{
          background-color:#cef; /*pale blue for even rows*/
      }
      .highlight{
          font-weight:bolid;
          color:#f00;
      }

JavaScript

$(document).click(function() {
    var $thp = $('th').parent();
    $thp.addClass('table-heading');
    $('tr').not($thp).addClass(function() {
         alert($(this).find('td').eq(1).text());
        return $(this).index() % 2 == 0 ? 'even' : 'odd';
       
    });
});