JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" width="100%">
		<tbody><tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</tbody></table>

CSS

.highlight { background-color:#ccffcc; }

JavaScript

function highlightHoveredObject(x, y) {
	    $('td').each(function() {
	      // check if is inside boundaries
	      if (!(
	          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
	          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
	      )) {

	        $(this).addClass('highlight');
	      }
	    });
	}

	$(document).ready(function() {	

		var active = false;

		$("td").on("mousedown", function(ev) {
			active = true;
			$(".highlight").removeClass("highlight"); // clear previous selection
			ev.preventDefault(); // this prevents text selection from happening
			$(this).addClass("highlight");
		});

		$("td").on("mousemove", function(ev) {
			if (active) {
				$(this).addClass("highlight");
			}
		});
		
		$(document).on("mouseup", function(ev) {
			active = false;
		});

		$("td").on("touchstart", function(ev) {
			active = true;
			$(".highlight").removeClass("highlight"); // clear previous selection
			ev.preventDefault(); // this prevents text selection from happening
			$(this).addClass("highlight");
		});

		$("td").on("touchmove", function(ev) {
			if (active) {
				var touch = ev.originalEvent.touches[0];
				highlightHoveredObject(touch.clientX, touch.clientY);
			}
		});
		
		$(document).on("touchend", function(ev) {
			active = false;
		});

	});