JavaScript Grid

Bind to the rowselect event by type: jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <h3>
            Customers</h3>
  <div id="customersGrid">
  </div>
  <h3>
            Orders by Customer</h3>
  <div id="ordersGrid">
  </div>
</div>
<button id="jqxbutton2">Action Button</button>
<button id="jqxbutton3">Action Button 2</button>

JavaScript

// prepare the data
var source = {
  datafields: [{
    name: 'CustomerID'
  }, {
    name: 'CompanyName'
  }, {
    name: 'ContactName'
  }, {
    name: 'ContactTitle'
  }, {
    name: 'Address'
  }, {
    name: 'City'
  }, {
    name: 'Country'
  }, {
    name: 'Icons'
  }],
  localdata: [{
    "CustomerID": "ALFKI",
    "CompanyName": "Alfreds Futterkiste",
    "ContactName": "Maria Anders",
    "ContactTitle": "Sales Representative",
    "Address": "Obere Str. 57",
    "City": "Berlin",
    "Region": null,
    "PostalCode": 12209,
    "Country": "Germany",
    "Phone": "030-0074321",
    "Fax": "030-0076545"
  }, {
    "CustomerID": "ALFKIa",
    "CompanyName": "Alfreds Futterkiste",
    "ContactName": "Maria Anders",
    "ContactTitle": "Sales Representative",
    "Address": "Obere Str. 57",
    "City": "Berlin",
    "Region": null,
    "PostalCode": 12209,
    "Country": "Germany",
    "Phone": "030-0074321",
    "Fax": "030-0076545"
  }]
};
var dataAdapter = new $.jqx.dataAdapter(source);

var actionButtonClicked = false,
  selectedrows = [];

$("#customersGrid").jqxGrid({
  width: 850,
  height: 120,
  source: dataAdapter,
  selectionmode: 'checkbox',
  keyboardnavigation: false,
  columns: [{
    text: 'Icons',
    datafield: 'Icons',
    width: 150,
    createwidget: function(row, column, value, htmlElement) {
      var datarecord = value;
      var img1 = $('<img style="margin-left: 5px; display:none;" id="filmPicture3" height="21" width="21" src="http://www.wpclipart.com/signs_symbol/checkmarks/checkmark_2/checkmark.png"/>');
      var img2 = $('<img style="margin-left: 5px; display:none;" id="filmPicture3" height="21" width="21" src="http://www.clker.com/cliparts/8/x/C/8/D/o/check-mark-orange-th.png"/>');
      $(htmlElement).append(img1);
      $(htmlElement).append(img2);

      if (actionButtonClicked && selectedrows.indexOf(row.visibleindex) !== -1) {
        img1.show();
        img2.show();
      }
    },
    initwidget: function(row, column,...