Как реализовать редактирование текста DOM элемента средствами JavaScript. По клику на элемент в нем будет появляться инпут, с помощью которого можно будет поредактировать текста элемента. По потери фокуса инпут будет пропадать, а в элементе будет появляться новый текст.
Исходники кода
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
td {
padding: 20px;
border: 1px solid black;
}
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener('click', function func() {
var input = document.createElement('input');
input.value = this.innerHTML;
this.innerHTML = '';
this.appendChild(input);
var td = this;
input.addEventListener('blur', function() {
td.innerHTML = this.value;
td.addEventListener('click', func);
});
this.removeEventListener('click', func);
});
}