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

Jeditable是一个很好的插件。

您可能还想查看新的html5 contenteditable属性。将其设置为true将允许您编辑内部文本。

http://html5demos.com/contenteditable

Answer 2

将文本和带有该文本的输入框放在表格单元格中：

<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更改每个的显示。

显然还有其他一些小问题可以解决，但这就是让你看起来像是把文字变成输入框的方式的一般想法。

使单击的行可编辑

2 个答案: