JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divScroll" class="cssdiv">
<table cellpadding="0" cellspacing="0" id="contentPlaceHolderMain_tableAppointment" width="100%"  border="1">
    <tr class="csstablelisttd">
        <td>Hour</td>      <td>Minute</td>
        <td>Student Name</td>
    </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
 ...

CSS

.csstablelisttd
{text-align: left;
color: #1B72A4;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
.csstdhighlight
		{
			background-color: #CCFFCC;
			color: Red;
			text-align: center;
			vertical-align: top;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 11px;
		}
.cssdiv
{
	/*border: 1px solid #CCCCCC;*/
	overflow: auto;
}

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');
var startIndex = -1;
var direction = 0;

$table.on('mouseenter', 'td:last-child', function(e) {
    var $this = $(this);
    var rowIndex = $this.parent().index();
    if (direction === 0 && startIndex != -1) {
        direction = rowIndex > startIndex ? 1 : -1;
    }
    
    if (e.which === 1 && (
        (direction === -1 && rowIndex < startIndex) ||
        (direction === 1 && rowIndex > startIndex))
       ) {
        $(this).addClass('csstdhighlight');
    }
}).on('mousedown', 'td:last-child', function() {
    var $this = $(this);
    startIndex = $this.parent().index();

    $this.addClass('csstdhighlight');
}).on('mouseup', 'td:last-child', function() {
    direction = 0;
    startIndex = -1;
}).on('click', 'td:last-child', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});