редактирование таблицы
Как сделать так: выводим таблицу из базы данных, в <table> затем при нажатии кнопки редактировать на строку <tr> все <td> становились <input> и можно было редактировать и затем при нажатии применить или Ctrl+Enter сохранялось и снова становилось таблицей. Может быть есть уже готовые примеры подскажите...
|
Цитата:
Создавай динамически те инпуты... Заполняй их значениями из ячеек... А потом обратно... В чем именно проблема? |
Как их создавать в этом и вопрос :)
|
psfdek,
поиск по форуму вашей темы сразу даёт несколько примеров :cray: удалить элемент input с сохранением его значения в <td> |
Простой ответ - contenteditable.
Не простой подразумевает типы столбцов и запись значений куда-то еще кроме ячейки. Создать можно заранее, а потом только показывать в нужном месте. |
Из своего опыта. Однопольная система отстой. В phpMyAdmin так сделано и жутко достает когда достается что-то там поправить изредка. Эффективнее рендерить всю строку, что открывает обычную возможность переходить с поля на поле табулятором и мгновенно все править.
|
Цитата:
И как? |
Цитата:
Цитата:
в примере как раз при клике ячейка становится инпутом - отредактировали кликнули вне таблицы всё введённое сохранилось -- потом обошли все ячейки и отправили отправили данные на сервер |
ну я про конечные данные, они же там после редактирования без инпутов уже, вопрос как правильно записать таблицу в базу потом.
Преобразовать все td в input и занести в массив и потом через While записать в базу. Так? Или это пурга? Или с помощью ajax сделать что бы каждый отдельный тег тд менялся на инпут при редактировании и после закрытия инпута преобразования обратно в тд и записывал себя в базу, но я не знаю как это сделать. Как в phpmyadmin |
psfdek,
зачем вам инпуты то -- берите информацию прямо из ячеек |
Понял, спасибо!
|
Цитата:
|
psfdek,
добавить .keypress() и по условию что клавиша Enter закачивать редактирование. |
psfdek,
поставил keyup -- Enter выход из режима редактирования
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
$(document)
.ready(function () {
$("td")
.click(function () {
var text = $(this).html(),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
$(this).parent().html($(this).val())
},
"keyup": function (event) {
event.which == 13 && $(this).trigger("blur")
}
});
$(this).html(varX);
varX.setCursorPosition(text.length)
});
});
</script>
</head>
<body>
<table>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
|
Как разрешить только 2 столбец редактировать?
Как запретить редактировать некоторые строки вообще. Например строки в THEAD |
Цитата:
$("tbody tr td:nth-of-type(2)")
|
Спасибо!
|
tbody tr td:nth-of-type(2) а как к этому добавить еще и третью строку?
|
des1roer,
tbody tr td:nth-of-type(n + 2) - все кроме первой tbody tr td:nth-of-type(2), tbody tr td:nth-of-type(3) - только 2 и 3 колонка |
tbody tr td:nth-of-type(n+2)
|
| Часовой пояс GMT +3, время: 20:21. |