мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

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

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