"editable table"
Bootstrap 3.3.0 Snippet by mattcoad

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
<div class="row">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="active">
<th>CODE</th>
<th>DESC</th>
</tr>
</thead>
<tbody>
<tr>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<td class="editable">1234</td>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<td class="editable">Description</td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
$(document).on('click', '.editable', function(e) {
var caller = $(this);
var currentVal = $(this).text();
var width = $(this).width();
console.log($(caller).offset());
console.log($(caller).position());
var $sizeDiv = $('<div/>', {
class: 'col-xs-12 col-sm-12 col-md-12 col-lg-12'
});
var $input = $('<input/>', {
class: 'form-control',
type: 'text',
value: currentVal,
css: {
position: 'absolute',
top: $(caller).position().top + 5,
left: $(caller).position().left + 5,
'z-index': 10000,
width: $(caller).width()
}
});
//$(caller).html('');
$(caller).append($input);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: