jquery - 如何将 Jquery <div> 替换为可编辑的 &lt;textarea&gt;？

Question

我想在单击按钮(“#Edit”)时将我的 Div 标签替换为可编辑文本区域。这样 TextArea 就可以以可编辑格式保存 Div 标签中存在的数据。

例如。分区

<div id="tabs-1">
    <table id="tab1">
    <tr>
    <td>First Name</td>
    <td><%: Model.InfoName%></td>
    </tr>
    <tr><td>Last Name</td><td><%: Model.infoLastName%></td></tr>
    <tr><td>Fathers Name</td><td><%: Model.infoFatherName%></td></tr>
    </table>
    <input type="button" value="Edit" id="button" />
</div>

Jquery

<script type="text/javascript">
   $(function () {
       $("#button").click(function () { $("#tabs-1")
// Here I need help to replace div tag to editable textarea(or form with editable textfields for every td with submit and cancel button) with one additional replacement which is replace Edit Button with Submit and cancel(two button)
       });
   });

需要解决方案::将 div 标签替换为可编辑文本区域，并添加一个替换，即用提交和取消(两个按钮)替换编辑按钮这样我就可以提交我对某些 Controller 操作所做的更改。

一种可能的解决方案::替换为其他一些元素(呈现的元素包含与 div 包含的相同数据，但采用可编辑格式，此外它还包含“提交”和“编辑”按钮)
< br/> 我应该这样做吗？

Answer 1

Google 的术语是“就地编辑”。您可以使用Jeditable jQuery 就地编辑插件。有一个demo page看看它是否能满足您的需求。