у меня есть табличка, каждая строчка заканчивается кнопочками редактировать или удалить строчку.
С удалением строчки проблем нет, я сделалал это, как сделать, чтобы строчка редактировалась при нажатии на кнопку, то есть возникает диалоговое окно,где я делаю изменения, потом наживаю enter и вижу обновленную строчку в табличке.
Вот код для таблички
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.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
<div class="row-fluid">
<table class="table table-striped" id="table-visual-features">
<thead>
<tr>
<th>Visual Feature</th>
<th>Type [currently not used]</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Numeric</td>
<td>Values to be mapped to the x-axis</td>
<td>
<button class="btn btn-mini action_change"><i class="icon-pencil" </i></button>
<button class="btn btn-mini btn-danger action-remove-visual-feature" > <i class="icon-trash icon-white"></i></button>
</td>
</tr>
<tr>
<td>y</td>
<td>Numeric</td>
<td>Values to be mapped to the y-axis</td>
<td>
<button class="btn btn-mini"><i class="icon-pencil"></i></button>
<button class="btn btn-mini btn-danger action-remove-visual-feature" ><i class="icon-trash icon-white"></i></button>
</td>
</tr>
<tr>
<td>c</td>
<td>Any</td>
<td>Values to be mapped to color</td>
<td>
<button class="btn btn-mini"><i class="icon-pencil"></i></button>
<button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
<tr>
<td>r</td>
<td>Numeric</td>
<td>Values to be mapped to the radius</td>
<td>
<button class="btn btn-mini"><i class="icon-pencil"></i></button>
<button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
вот код для обработки события, если кнопка нажата
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.
<script type="text/javascript">
$(document).ready(function() {
$('.action-remove-visual-features').on('click', function() {
$('#table-visual-features tbody').html('');
});
$('.action-add-visual-feature').on('click', function() {
$('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="btn btn-mini"><i class="icon-pencil"></i></button> <button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button></td></tr>');
});
$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
$(this).parents('tr').remove();
});
$('.action_change').on('click', function(){
console.log("clicked on pancil");
});
});
</script>
