JSFiddle - React, Tailwind, and code Playground

by Stephen Katulka

HTML

<table class="board" border="1">
	<tr class="row">
		<td class="cell" data-row="1" data-column="1"></td>
		<td class="cell" data-row="1" data-column="2"></td>
		<td class="cell" data-row="1" data-column="3"></td>
		<td class="cell" data-row="1" data-column="4"></td>
		<td class="cell" data-row="1" data-column="5"></td>
	</tr>
	<tr class="row">
		<td class="cell" data-row="1" data-column="1"></td>
		<td class="cell" data-row="1" data-column="2"></td>
		<td class="cell" data-row="1" data-column="3"></td>
		<td class="cell" data-row="1" data-column="4"></td>
		<td class="cell" data-row="1" data-column="5"></td>
	</tr>
	<tr class="row">
		<td class="cell" data-row="1" data-column="1"></td>
		<td class="cell" data-row="1" data-column="2"></td>
		<td class="cell" data-row="1" data-column="3"></td>
		<td class="cell" data-row="1" data-column="4"></td>
		<td class="cell" data-row="1" data-column="5"></td>
	</tr>
	<tr class="row">
		<td class="cell" data-row="1" data-column="1"></td>
		<td class="cell" data-row="1" data-column="2"></td>
		<td class="cell" data-row="1" data-column="3"></td>
		<td class="cell" data-row="1" data-column="4"></td>
		<td class="cell" data-row="1" data-column="5"></td>
	</tr>
	<tr class="row">
		<td class="cell" data-row="1" data-column="1"></td>
		<td class="cell" data-row="1" data-column="2"></td>
		<td class="cell" data-row="1" data-column="3"></td>
		<td class="cell" data-row="1" data-column="4"></td>
		<td class="cell" data-row="1" data-column="5"></td>
	</tr>	
</table>

CSS

td {
    width:50px;
    height:50px;
}

.white {
    background-color:white;
}
.red {
    background-color:red;
}

JavaScript

var getNear = function(row, column) {
	var rows = $("tr.row").slice(row-1, row+1);
	var cells = rows.find("td.cell").slice(column-1, column+1);
	return cells;
};

$(document).ready(function() {
    $(document).on("click", "td.cell", function (e){
        var cell = $(e.target);
        $("td.cell").css("bgcolor:white");
        var col = cell.parent().children().index(cell);
        var row = cell.parent().parent().children().index(cell.parent());
        alert("Row:" + row + ", Col: " + col);
        getNear(row, col).each(function(e){
            $(e).css("bgcolor:red");
    });
});