Делаем редактируемую строку нажатой

Question

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

<tr>
<td><?php echo $f1; ?></td>
<td><?php echo $f2; ?></td>
<td><?php echo $f3; ?></td>
<td><?php echo $f4; ?></td>
<td><input class="edbuttons" type="button" value="Edit"></td>
</tr>

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

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

Я добавил класс к кнопке редактирования для использования в качестве селектора, но я не уверен, является ли это наиболее эффективным методом.

Любая помощь с благодарностью получена!

Answer 1

Поместите текст и поле ввода с этим текстом в ячейку таблицы:

<td id="myText">
    <div>My text goes here</div>
    <input type="text" name="whatever" value="My text goes here" style="display:none;"/>
</td>

Затем ваша кнопка редактирования переключает их обоих:

//if you have jquery:
$('#myText div').toggle();
$('#myText input').toggle();

Если вы не используете jquery, вы можете использовать javascript, чтобы изменить отображение каждого из них.

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

Answer 2

Jeditable - хороший плагин для этого.

Вы также можете посмотреть на новый атрибут html5 contenteditable.Установка его в true позволит вам редактировать текст внутри.

http://html5demos.com/contenteditable