<html>
<body>
</body>
<script>
var db = [4, 6, 8, 5, 7];
//create data
var table = document.createElement('table');
var content = [];
db.forEach(function (val) {
content.push('<td>' + val + '</td><td><input type="button" value="Редактировать" class="edit"></td>');
})
table.innerHTML = '<tr>' + content.join('</tr><tr>') + '</tr>';
document.body.appendChild(table);
function insertAfter(elem, refElem) {
var parent = refElem.parentNode;
var next = refElem.nextSibling;
if (next) {
return parent.insertBefore(elem, next);
} else {
return parent.appendChild(elem);
}
}
document.body.onclick = function (e) {
var button = e.target;
switch (button.getAttribute('class')) {
case 'edit':
var tr = document.createElement('tr'),
thsTr = button.parentElement.parentElement;
tr.innerHTML = [
'<td>',
'<input type="text" value="' + thsTr.getElementsByTagName('td')[0].innerHTML + '">',
'</td>',
'<td>',
'<input type="button" value="Сохранить" class="save">',
'</td>'
].join('');
insertAfter(tr, thsTr);
thsTr.style.display = 'none';
break;
case 'save':
var thsTr = button.parentElement.parentElement,
value = thsTr.getElementsByTagName('input')[0].value;
thsTr.previousSibling.getElementsByTagName('td')[0].innerHTML = value;
thsTr.previousSibling.style.display = 'table-row';
thsTr.remove();
break;
}
}
</script>
</html>