JSFiddle - React, Tailwind, and code Playground

HTML

<table border="0">
<tr>
<td></td>
    <td>8:00</td>
        <td>9:00</td>
        <td>10:00</td>
        <td>11:00</td>
        <td>12:00</td>
        <td>13:00</td>
        <td>14:00</td>
        <td>15:00</td>
        <td>16:00</td>
        <td>17:00</td>
        <td>18:00</td>
    </tr>
<tr><td>17.06.2015</td>
<td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td></tr>
<tr><td>18.06.2015</td>
<td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td></tr>
<tr><td>19.06.2015</td>
<td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green" onClick="editcolor(this)"></td><td class="green"...

CSS

.green, .gray:hover{
		background:#0f0;
		}
	.red,.yellow:hover{
		background:#f00;
		}
	.green:hover,.yellow{
		background:#ff0;
		}
	.gray,.red:hover{
		background:#777;
		}

JavaScript

function editcolor(obj){
		if($(obj).hasClass("green")){
			$(obj).removeClass("green");
			$(obj).addClass("yellow");
			type = 1;
		}else if($(obj).hasClass("yellow")){
			$(obj).removeClass("yellow");
			$(obj).addClass("red");
			type = 0;
		}else if($(obj).hasClass("red")){
			$(obj).removeClass("red");
			$(obj).addClass("gray");
			type = 0;
		}else{
			$(obj).removeClass("gray");
			$(obj).addClass("green");
			type = -1;
		}
		alert("Координаты - " + [$(obj).offset().left,$(obj).offset().top]);		
	}