Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="form-group clearfix" id="editField">
<div class="col-md-3">
<button class="btn blue btn-xs" type="button" data-labelcap="Ladduser">Contact Name</button>
</div>
<div class="col-md-3">
<label class="control-label" data-labelcap="Lresponsibility">Responsibility</label>
</div>
<div class="col-md-6">
<label class="control-label" data-labelcap="Lphone">Preferred Phone</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="adduser" maxlength="30" data-pid4="adduser" />
</div>
<div class="col-md-3">
<select class="form-control" data-placeholder="" id="responsibility" data-pid4="responsibility"></select>
</div>
<div class="col-md-3">
<select class="form-control" data-placeholder="" id="phone" data-pid4="phone"></select>
</div>
<div class="col-md-3">
...
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.selected{
background-color: #ccc
}
JavaScript
$('.table').on('click', 'tr', function (e) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
for (var i = 0; i < $(this).find("td").length; i++) {
// fill input values
$(this).closest("#editField").find("div").eq(i).find("input:text")
.val($(this).find("td").eq(i).text());
// fill selects //$(this).closest("table").find("th").eq(i).find("select")
//.val($(this).find("td").eq(i).text());
}
});