# Редактирование таблицы по клику на ячейку

Как реализовать редактирование текста 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); }); }`

## Смотрите также

- видео
  редактирование списка через появляющуюся форму

← →
↑