JSFiddle - React, Tailwind, and code Playground

by Thomas Aylott

HTML

<table id=lulz cellspacing=0 callpadding=0>
    <tr><td><td><td><td><td><td>
    <tr><td><td><td><td><td><td>
    <tr><td><td><td><td><td><td>
    <tr><td><td><td><td><td><td>
    <tr><td><td><td><td><td><td>
    <tr><td><td><td><td><td><td>
</table>

CSS

#lulz {
  width:480px;
  height:480px;
  border-collapse:collapse;
}
#lulz td {
  border: 2px solid black;
}
#lulz td.chosen {
  border-color: red;
}
#lulz td.chosen-top {
  border-bottom-color: red;
}
#lulz td.chosen-left {
  border-right-color: red;
}

JavaScript

function chooseCell(td){
	if (chooseCell.currentCell) chooseCell.currentCell.className = '';
	if (chooseCell.currentLeft) chooseCell.currentLeft.className = '';
	if (chooseCell.currentTop) chooseCell.currentTop.className = '';

	chooseCell.currentCell = td;
  chooseCell.currentLeft = td.previousSibling;
  chooseCell.currentTop = td.parentNode.rowIndex > 0 && td.parentNode.previousSibling.childNodes[td.cellIndex];

	if (chooseCell.currentCell) chooseCell.currentCell.className = 'chosen';
	if (chooseCell.currentLeft) chooseCell.currentLeft.className = 'chosen-left';
	if (chooseCell.currentTop) chooseCell.currentTop.className = 'chosen-top';
}

lulz.onclick = function(event){
	if (!event) event = window.event;
  // this could be better :P
  chooseCell(event.target);
};

chooseCell(lulz.getElementsByTagName('td')[-1 + 6 * 3 + 4])