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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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