JSFiddle - React, Tailwind, and code Playground

by Ruchika Sharma

HTML

<table border=1>
  <tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]');">
    <td class="text">John</td>
    <td class="text"> Doe</td>
  </tr>
  <tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]);">
    <td class="text">Sarah</td>
    <td class="text">Dean</td>
  </tr>
</table>

CSS

tr.selected td {
  background-color: #333;
  color: #fff;
}

JavaScript

$(".text_data td").on("click", function() {
  var tr = $(this).parent();
  if (tr.hasClass("selected")) {
    tr.removeClass("selected");
  } else {
    tr.addClass("selected");
  }

});