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>
<div id="toolbar1">
Edit:
<input id="txtInput" onfocus="this.value = this.value;">
</div>
<button id="btnUpdate">
Update
</button>
</div>
<table id="table">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
JavaScript
$(function() {
var index;
var f;
$('#table').bootstrapTable({
data: getData(),
search: true,
onClickCell: function(field, value, row, $element) {
index = $element.parent().data("index");
f = field;
$("#txtInput").val(value).focus();
}
});
$("#btnUpdate").click(function() {
var newValue = $("#txtInput").val();
$('#table').bootstrapTable('updateCell', index, f, newValue);
});
});
function getData() {
var data = [{
"id": "1",
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
}, {
"id": "2",
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
}, {
"id": "3",
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
}, {
"id": "4",
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
}, {
"id": "5",
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}];
return data;
}