Handsontable example

by Aman Middha

HTML

<div id="example1grid" class="dataTable"></div>
<br>
      <button id="btnBGColor" class="btn btn-secondary btn-lg edit ">
                        Change BG Color
                    </button>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<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 () {
  var data = [
    ["2008", 10, 11, 12, 1],
    ["2009", 20, 11, 14, 0],
    ["2010", 30, 15, 12, 1]
  ];
var rowcount;
var d = $("#example1grid").handsontable({
		data: data,
    colHeaders: ["", "Kia", "Nissan", "Toyota", "Honda"],
		cells: function (row, col, prop) {
			var cellProperties = {};
			var hot = this.instance;
       rowcount = hot.countRows() - hot.countEmptyRows();
			return cellProperties;
		},
  });
      var buttons = {
        file: document.getElementById('btnBGColor')
    };
    buttons.file.addEventListener('click', function () {
    $("td").attr('style', 'background:rgb(238,238,238) !important');
    });
});