Не работает скрипт в добавленной строке таблицы

Question

Стоит задача: При нажатии на ячейку таблицы должен выходить input в котором можно отредактировать значение ячейки, если редактировать значение в ячейке таблицы, изначально написанной в html документе, то все работает, но если добавить новую строку с помощью кнопки "Добавить разработчика", то ячейки в добавленной строке никак не поддаются редактированию. Как можно решить данную проблему?

Код скрипта:

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);
        });
    }

нажатие на новую ячейку добавленной строки

Answer 1

Можно попробовать делегирование событий — обрабатывать клик на таблице, но работать с ячейкой как источником события, тогда новые ячейки тоже будут охвачены.

var table = document.querySelector('table');

table.addEventListener('click', function func(event) {
    var td = event.target.closest('td');
    if (!td) return;
    var inputAttached = td.querySelector('input');
    if (inputAttached) return;

    var input = document.createElement('input');

    input.value = td.innerHTML;
    td.innerHTML = '';
    td.appendChild(input);
    input.focus();

    input.addEventListener('blur', function () {
        td.innerHTML = input.value;
    });
});

<table><td>111</td><td>222</td><td>333</td></table>

Но при вашем подходе нужно продумать такую трудность: чтобы событие совершилось, нужно, чтобы кнопка мыши была нажата и отпущена на одном и том же элементе. Но когда поле теряет фокус и исчезает, размер ячейки меняется и все ячейчки справа от неё сдвигаются. Поэтому может быть такое несчастное стечение обстоятельств: вы отредактировали ячейку и нажали кнопку мыши на соседней ячейке справа, чтобы редактировать её. Тогда текущая ячейка теряет фокус, поле в ней пропадает, она меняет размер и ячейка справа сдвигается, поэтому отпустить кнопку мыши вы можете уже над другим элементом — и событие не произойдёт, придётся щелкать ещё раз.

Я пробовал заменить 'click' на 'mousedown' — но это не работает. Вернее, работает, но не так, как нужно: обработчики всех событий срабатывают мгновенно, потому что пока вы держите кнопку нажатой, поле усппевает создаться, присоединиться, утратить фокус и пропасть, поэтому кажется, что ничего не происходит.

БЛОГ НА HUSL

Не работает скрипт в добавленной строке таблицы

Ответы (1 шт):