JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<table >
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

CSS

.colorSelect{
			background: #BBB;
		}.colorSelection{
			background: #777;
		}
		table{

			border-collapse: collapse;
			border:2px solid #000;
		}
		tr,td{
			width: 50px;
			height: 50px;
			text-align: center;
			border:1px solid #333;
		}

JavaScript

window.onload = function(){

			for(var i = 0; i < document.getElementsByTagName("td").length;i++)
				document.getElementsByTagName("td")[i].addEventListener("mouseover", action)

		}
		function action(e){
			for(var i = 0; i < e.path[1].rowIndex; i++)
				e.path[3].rows[i].cells[e.target.cellIndex].className +=" colorSelect";
			for(var i = 0; i < e.target.cellIndex; i++)
				e.path[1].cells[i].className +=" colorSelect";

			this.className += " colorSelection";
			var out = function(ev){				
			for(var i = 0; i < ev.target.cellIndex; i++)
				ev.path[1].cells[i].className = ev.path[1].cells[i].className.replace("colorSelect", '');
			for(var i = 0; i < ev.path[1].rowIndex; i++)
				ev.path[3].rows[i].cells[ev.target.cellIndex].className = ev.path[3].rows[i].cells[ev.target.cellIndex].className.replace("colorSelect", '');
				this.className = this.className.replace("colorSelection", '');
				this.removeEventListener("mouseout", out);
			}
			this.addEventListener("mouseout", out);
		}