使单击的行可编辑答案

【问题标题】：Making a clicked row editable使单击的行可编辑
【发布时间】：2018-10-24 18:38:49
【问题描述】：

我正在动态创建下表，每行都有一个编辑按钮。

<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>

单击编辑按钮时，我希望将行中的单元格转换为文本框，但我不知道该怎么做。我花了几个小时在网上搜索正确的语法，但找不到任何我需要的东西。

这个想法是，当单击编辑时，用户可以修改行上的数据并单击将出现在编辑按钮位置的保存或取消按钮。

我在编辑按钮中添加了一个类以用作选择器，但我不确定这是否是最有效的方法。

感谢您的帮助！

【问题讨论】：

这是可行的，但为什么要重新发明轮子。检查这个已经解决了同样问题的插件：appelsiini.net/projects/jeditable
“重新发明轮子”的 2 个理由 - 1) 良好的 javascript 学习经验，2) 只需很少的代码即可实现这一点。显然只是我的意见。
我希望以此作为学习经验，因此采用了 DIY 方法，但耗时太长。感谢您的可编辑建议。我已经使用这个模块重新设计了表格，现在效果非常好！

标签： jquery html-table

【解决方案1】：

Jeditable 是一个很好的插件。

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

http://html5demos.com/contenteditable

【讨论】：

感谢您的建议，但我决定使用 jeditable。

【解决方案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来改变每个的显示。

显然还有其他一些小事情需要解决，但这是一种使文本看起来像输入框一样的总体思路。

【讨论】：

谢谢，这似乎是一个优雅的解决方案。最后我选择了 jeditable，因为它似乎完全符合我的要求，因为它很容易实现！ :-)