​

$(window).load(function(){

  for(i=0; i<128; i++)

  {

    var newRow = $('<div/>', {

    id: 'row-' + i

}).appendTo('.table_area');

    for (j=0; j<32; j++)

    {

      var rowid= "r" +i + "c" + j;

      $('<div/>', {id: rowid }).data("row",i).data("column",j).addClass("cap r" + i + " c" + j).appendTo(newRow);

    }

  }

  var sel = "";

$(".cap").hover(function () {

    var row  = $(this).data("row");

    var col = $(this).data("column");

    sel = "";

    for(var i=row-2; i<=row+2; i++)

    {

      for(var j=col-2; j<=col+2; j++)

      {

        sel += ".r" + i + ".c" + j + ",";

      }

    }

  sel = sel.slice(0,-1);

  $(sel).css("background-color","blue");

},function () {

    $(sel).css("background-color","white");

  });

});