Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table1" data-click-to-select="true" data-select-item-name="myRadioName" data-row-style="rowStyle" data-unique-id="name">
  <thead>
    <tr>
      <th data-field="state" data-radio="true"></th>
      <th data-field="name">Name</th>
      <th data-field="hours">hours</th>

    </tr>
  </thead>
</table>
<button id="btnIncrease">Increase
</button>

JavaScript

var lastNameSelected = '';
$table = $("#table1");
var theData = [{
  "name": "Week1",
  "hours": 1
}, {
  "name": "Week2",
  "hours": 2
}, ];


$("#table1").bootstrapTable({
  data: theData,
});

$("#btnIncrease").click(function() {
  var selectedRows = $table.bootstrapTable('getSelections');
  if (selectedRows.length) {
    selectedRows[0].hours += 1;
    lastNameSelected = selectedRows[0].name;
    $table.bootstrapTable('updateByUniqueId', selectedRows[0].name, selectedRows[0]);
  };



});

function rowStyle(row, index) {
    var classes = 'danger';

  
        return {
            classes: classes
        };
  
    return {};
}