как сохранить данные на кнопке Ок

[kvitochka13]

Здравствуйте, Форумчане!

есть задача - таблица с ячейками. при нажатии на ячейку происходит отображение ее содержимого для редактирования. при нажатии на кнопку Ок должны сохраняться отредактированные данные, при нажатии на Cancel - отменяться. это задача из учебника Кантора, но хочется самостоятельно написать.

Не получилось с кнопкой Ок. Не редактируются данные, не сохраняются, блок textarea c кнопками улетает в угол документа и висит там до обновления страницы.

код вот здесь https://jsfiddle.net/5yuvk3ku/ , чтобы не удлинять топик. код не причесан - все в одном. оптимизация будет, когда функционально решу задачу.

Пробовала удалять textarea при нажатии на кнопку Ок, не получается, потому что она определяется undefined, когда нажимаю на кнопку Ок. Пробовала сохранить td и textarea в переменную и потом с ней поработать по нажатию на кнопку Ок, - не получилось.

Понимаю, что нужно убрать класс активной ячейки, сохранить то, что в textarea в содержимое ячейки и удалить textarea. но закодить это не получается.

заранее большое спасибо!

[ksa]

это задача из учебника Кантора, но хочется самостоятельно написать.
...
но закодить это не получается

Тогда где эта самая самостоятельность?

[kvitochka13]

Спасибо за ваш комментарий

ну я имела в виду, самостоятельно от Кантора и без списываний подумала, одна голова хороша, а две лучше, и, может, на форуме кто-то что-то подскажет) не сделает за меня, а подскажет, где может быть ошибка и почему может не получаться

если нет, то тогда буду продолжать заполнять пробелы в знаниях и учиться, учиться, учиться....

[laimas]

А какова конечная цель данной задачи? Ведь если отредактировать и сохранить, то поле редактирования будет элементом формы, а если редактировать и отобразить результат опять в таблице, без сохранения, то поле будет временным элементом.

[kvitochka13]

А какова конечная цель данной задачи? Ведь если отредактировать и сохранить, то поле редактирования будет элементом формы, а если редактировать и отобразить результат опять в таблице, без сохранения, то поле будет временным элементом.

цель - редактирование ячейки таблицы с дальнейшим сохранением изменений или отменой по нажатию соответствующих кнопок.

я пыталась сделать, чтобы textarea был у меня временным. собственно, не думаю, что он должен оставаться, т. к. по окончанию редактирования или отмены должны вернуться исходные настройки ячейки и этот блок редактирования уже не нужен. но моих соображений на данный момент не хватает, чтобы закончить задачу((

[laimas]

цель - редактирование ячейки таблицы с дальнейшим сохранением изменений или отменой по нажатию соответствующих кнопок.

Сохранение изменений в контексте веб, это для всех, то есть отредактировали и сохранили изменения на сервере. А это означает, что элемент редактирования должен быть до тех пор, пока изменения не будут отправлены на сервер. Сервер сохранил в базе изменения, все, задача решена.

Но если отмена изменений, то тут опять таки два варианта: а) отмена (отказ от редактирования), это отмена изменений (вернее не принятие таковых) во время редактирования; б) отмена изменений уже после сохранения на сервере, в этом случае сервер должен хранить и данные, которые были до последней редакции, чтобы можно было произвести откат назад.

Если же запомнить для себя, то это можно организовать и в локальном хранилище. А если запомнить, это отобразить введенный текст в ячейке таблицы, то это не запоминание, а так - "ляпота получилась", и забыли об этом.

То есть, подстричься, это общая задача, а как, укладка, духи или без, это уже детали, но очень важны для результата. )

Ставьте задачу от общего к частному, иначе ее никто не решит, а не только вы.)

[Dilettante_Pro]

kvitochka13,

if (target.className == 'ok') {
            target.parentElement.classList.remove('active');
            target.parentElement.innerHTML = target.parentElement.querySelector('textarea').value;
            if (selectedTd.split(' ')[1] == 'active') { selectedTd = selectedTd.split(' ')[0]; }
        }

[kvitochka13]

Огромное спасибо всем за комментарии, подсказки, советы

kvitochka13, можно просто свойство contentEditable переключать вместо использования textarea.

Спасибо! очень полезная информация!

laimas, большое спасибо за взгляд с другой стороны и масштаб решения каждой задачи. действительно, надо смотреть шире и глобальнее. а я при решении этой задачи об этом даже не подумала((

if (target.className == 'ok') {
            target.parentElement.classList.remove('active');
            target.parentElement.innerHTML = target.parentElement.querySelector('textarea').value;
            if (selectedTd.split(' ')[1] == 'active') { selectedTd = selectedTd.split(' ')[0]; }
        }

Dilettante_Pro, огромное спасибо! я пыталась сделать похожий вариант. только я пыталась обратиться напрямую к textarea или через переменную ((( хотя очень была близка к вашему решению.

и пока что мне не совсем понятно, почему мне нужно сначала снять класс "active" с ячейки, а потом производить сохранение редактирования. если наоборот, то вываливается ошибка. мне казалось, что главное, чтобы по нажатию кнопки сразу сохранять отредактированные данные, а потом уже можно писать другие операторы без строгой их последовательности, лишь бы выполнились по нажатию на кнопку Ок. поправьте меня, пожалуйста.

и тогда получается, что удалять (например, через remove()) поле textarea мне нужно? а тогда куда оно девается? ведь я каждый раз по клику на ячейку создаю новый элемент textarea.

[laimas]

масштаб решения каждой задачи

Тут не столько масштаб, сколь конечная цель. Не может возникать такого вопроса "что удалять (например, через remove()) поле textarea мне нужно?", если есть ответ на вопрос - что значит сохранение.

[Dilettante_Pro]

kvitochka13,

а тогда куда оно девается?

Содержимое ячейки, в которой находится textarea, переписывается заново содержимым textarea.
Именно поэтому нельзя менять последовательность действий - после перезаписи кнопки ОК (которая target) уже нет.