Handsontable example

HTML

<div id="example" class="handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="http://handsontable.com/lib/jquery.min.js"></script>
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

  .changeInput{
	  background-color: #edfd56 !important;
  }

JavaScript

$(document).ready(function () {

  var data = [
    ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
    ["2009", 0, 2941, 4303, 354, 5814],
    ["2010", 5, 2905, 2867, 412, 5284],
    ["2011", 4, 2517, 4822, 552, 6127],
    ["2012", 2, 2422, 5399, 776, 4151]
  ];
  var myRenderer = function (instance, td, row, col, prop, value, cellProperties) {
      Handsontable.TextCell.renderer.apply(this, arguments);
      if($(td).data("change")){
          $(td).addClass('changeInput');
      }
    };  
  $('#example').handsontable({
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true,
      cells: function (row, col, prop) {
        return {type: {renderer: myRenderer}};
      }
  });
  $('#example').handsontable('getInstance').addHook('afterChange', function(changes) {
      var ele=this;
      $.each(changes, function (index, element) {
              $(ele.getCell(element[0],element[1])).addClass('changeInput').data("change",true);
  });
});
  $("#example").on("keyup","textarea.handsontableInput",function (){
	$(this).addClass('changeInput');
  }).on("blur","textarea.handsontableInput",function (){
	$(this).removeClass('changeInput');
  });	
    
});