использую heavytable.js для создания редактируемой таблицы, все работает, но если я по нажатию на кнопку добавляю новую строку, то при клике на ячейку она не доступна, пока не обновишь страницы
| Javascript |
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| $(".nav_data .add_btn").click(function() {
$("table.heavyTable tbody").append('<tr data-id="" data-new="1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>')
});
(function($) {
$.fn.heavyTable = function(params) {
params = $.extend( {
startPosition: {
x: 1,
y: 1
}
}, params);
this.each(function() {
var
$hTable = $(this).find('tbody'),
i = 0,
x = params.startPosition.x,
y = params.startPosition.y,
max = {
y: $hTable.find('tr').length,
x: $hTable.parent().find('th').length
};
//console.log(xMax + '*' + yMax);
function clearCell () {
content = $hTable.find('.selected input').val();
$hTable.find('.selected').html(content);
$hTable.find('.selected').toggleClass('selected');
}
function selectCell () {
if ( y > max.y ) y = max.y;
if ( x > max.x ) x = max.x;
if ( y < 1 ) y = 1;
if ( x < 1 ) x = 1;
currentCell =
$hTable
.find('tr:nth-child('+(y)+')')
.find('td:nth-child('+(x)+')');
content = currentCell.html();
currentCell
.toggleClass('selected')
return currentCell;
}
function edit (currentElement) {
var input = $('<input>', {type: "text"})
.val(currentElement.html())
currentElement.html(input)
input.focus();
}
$hTable.find('td').click( function () {
clearCell();
x = ($hTable.find('td').index(this) % (max.x) + 1);
y = ($hTable.find('tr').index($(this).parent()) + 1);
edit(selectCell());
});
$(document).keydown(function(e){
if (e.keyCode == 13) {
clearCell();
edit(selectCell());
} else if (e.keyCode >= 37 && e.keyCode <= 40 ) {
clearCell();
switch (e.keyCode) {
case 37: x--;
break;
case 38: y--;
break;
case 39: x++;
break;
case 40: y++;
break;
}
selectCell();
return false;
}
});
});
};
})(jQuery);
$(document).ready( function () {
$('table').heavyTable({
xPosition: 1,
yPosition: 1
});
}); |
|
| HTML5 |
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
52
| <div class="nav_data">
<button type="button" aria-label="Добавить" data-type="add" class="add_btn"><span class="icon-plus"></span>Добавить</button>
</div>
<table class="heavyTable">
<thead>
<th>Date</th>
<th>Due Date</th>
<th>RUB</th>
<th>EUR</th>
<th>Debit</th>
<th>Credit</th>
<th>Balanse</th>
</thead>
<tbody>
<tr data-id="" data-new="0">
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
</tr>
<tr data-id="" data-new="0">
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
</tr>
<tr data-id="" data-new="0">
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
</tr>
<tr data-id="" data-new="1">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table> |
|
(
