<table id="tbl">
  <tbody>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
  </tbody>
</table>

table {
	border-collapse: collapse;
}

td {
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 3px;
	height: 3px;
}

tr:nth-child(odd) td {
  background-color: lightgrey;
}

tr td {
  background-color: white;
}

tr td.animate {
  -webkit-transition-property: background;
  -webkit-transition-duration: 10s;
  -moz-transition-property: background;
  -moz-transition-duration: 10s;
  transition-property: background;
  transition-duration: 10s;
}

tr td.over {	
  background-color: red;
}

$(document).ready(function() {
  $("#insertTable").click(function() {
    var div = document.getElementById('grid'); 
    var txt = "<table><tbody>", i, j;
	
    for(i = 0; i < 100; i++) {
      txt += "<tr>";
      for(j = 0; j < 100; j++) {
	    txt += "<td></td>";
      }
      txt += "</tr>";
    }
	
    txt += "</tbody></table>";
    div.innerHTML = txt;
    addHover($("td"));
  });
});

var addHover = function(cells) {
  cells.hover(function(e) {
    var jqEl = $(e.target), timeoutId = jqEl.data("timeoutId");
    jqEl.removeClass("animate").addClass("over");
    if  (timeoutId) {
	  clearTimeout(timeoutId);
	  jqEl.data("timeoutId", null);
    }
  },
  function(e) {
    var jqEl = $(e.target);
    jqEl.addClass("animate");
    jqEl.data("timeoutId", setTimeout(function() {
      jqEl.removeClass("over");
      jqEl.data("timeoutId", setTimeout(function() {
        jqEl.removeClass("animate");
      }, 10000));
    }, 0)); 
  });
};