JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:100%" id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>		
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
.hilight{
 background-color: red;
}

JavaScript

$(function () {
  var isMouseDown = false;
  $("#mytable td")
    .mousedown(function () {
    debugger;
      isMouseDown = true;
   
      $(this).toggleClass("hilight");
         var $this = $(this);
         parent = $this.closest('tr td').get(0);
        
      return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
        $(this).toggleClass("hilight");
       
      }
           });
  
  $(document)
    .mouseup(function () {
      isMouseDown = false;
       alert($(this).val());
    });
});