Handsontable example

by germandost

HTML

<div id="example1grid" class="dataTable"></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;}

JavaScript

$(document).ready(function () {
$("#example1grid").handsontable({
    colHeaders: ["", "Kia", "Nissan", "Toyota", "Honda"],        
  });

  var data = [
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];

  $("#example1grid").handsontable("loadData", data);   
  	//$('td').css('background-color', 'red');
});
Handsontable.hooks.add('afterRender', function(){
  var f = $('.htCore').find('tbody tr td:nth-child(2)');
  var s = $('.htCore').find('tbody tr td:nth-child(3)');
     f.each(function(i,v){
     if (s.eq(i).text() > $(v).text()) {
       $(v).css({'background':'red'});
     } else {
       $(v).css({'background':'green'});
     }
     });
});