JSFiddle - React, Tailwind, and code Playground
HTML
<table class="grooveTable">
<tr >
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
CSS
.grooveTable {
width: 100%;
height: 100%;
margin: 0 auto;
border-bottom:groove;
border-left:groove;
border-right:groove;
border-top:groove;
}
.grooveTable td {
cursor: pointer;
border-bottom:groove;
border-left:groove;
border-right:groove;
border-top:groove;
}
.grooveeTable tr:first {
border-bottom:medium;
}
JavaScript
colorArray = ['none','red','green','blue'];
$('.grooveTable').on('click','td', function(){
console.log( $(this).data('color') );
console.log( colorArray.length );
color = $(this).data('color') == undefined ? 0 : $(this).data('color')*1;
if( color == undefined || color == colorArray.length )
{
$(this).css('background-color',colorArray[0]);
$(this).data('color','0');
}
else
{
$(this).css('background-color',colorArray[color+1]);
$(this).data('color',color+1);
}
});