JQuery + Ajax + table

Наверно вы уже видели как работает phpMyAdmin в режиме просмотра содержимого таблицы. Выводится табличка и если в ячейку кликнуться мышкой — то ячейка заменяется на input text и можно ввести новое значение для ячейки и кликнув мимо — отправить все это в базу данных черех аякс…

Внутренности нечитабельные совсем и навороченные так что посмотрев содержимое вообще не стало понятно как все работает. Пдозреваю что там кроме аякса еще и jquery… Отавить содержимое в базу через аякс я могу используя jquery. Получить назад данные тоже. Н вот сделать такую табличку редактируемую пока не представляю как. Пробовал остые вещи — по клику в ячейку подменять именно в ней данные — получается, но надо же много больше и тут совсем потерялся в том как правильно надо такое делать…

В общем можете подсказать порядок действий или урок какой то как такое делать на jquery + ajax...?

Сразу скажу что варианты с плагинами делающими такие редактируемые таблицы мне не нужны — мне нужно научиться и понять как это работает и использовать то что уже есть готовое, а не менять структуру свою из за каких то новых плагинов… У меня уже есть сайт и все таблички в нем, надо просто уйти от специальных страниц редактирования табличных данных к простому варианту клик+апдейт…
  • Вопрос задан
  • 14319 просмотров
Пригласить эксперта
Ответы на вопрос 5
Urvin
@Urvin
При кликании на ячейку — поверх нее класть активный input[type=tex], при onblur этого едита отпралять аякс-запрос.
Оно?
Ответ написан
ilyaplot
@ilyaplot
PHP программист
Очень извиняюсь за ту простыню, что накатал выше. Вот решение без id и прочих костылей.

// При клике на td ставим input
$("table").on('click', 'td', function(){
	$(this).html("<input type='text' value='"+$(this).text()+"'/>");
// Что бы input не ставился повторно, запрещаем
}).on('click', 'td input', function(){
	return false;
// При потере фокуса в input, возвращаем все как было.
}).on('blur', 'td input', function(){
	// text, т.к. html теги не обрабатываются.
	$(this).parent('td').text($(this).val());
	// Тут можно вставить ajax 
});
Ответ написан
ilyaplot
@ilyaplot
PHP программист
$(«table»).on('click', 'td', function(){
$(this).html("/>");
});

Обратно по аналогии.
Если ошибся, поправьте пожалуйста, сейчас немного пьян.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы