Question

我想在按钮点击时将我的Div标签替换为可编辑的textarea（＆＃34; #Edit＆＃34;）。因此TextArea以可编辑格式保存Div标签中的数据。

的 EG。格

<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标签替换为可编辑的textarea，另外还有一个替换，即使用提交替换编辑按钮并取消（两个按钮）这样我就可以提交我对某些控制器操作所做的更改。

一个可能的解决方案 ::替换为其他一些元素（渲染元素保存相同的数据，div保持但可编辑格式另外还包含提交和编辑按钮）
<登记/> 我应该为此做些什么？

Answer 1

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

Answer 2

我建议

<div id="tabs-1">
    <table id="tab1">
        <tr><td>First Name</td>
            <td><span id='name'><%: Model.InfoName%></span></td>
        </tr>
        <tr><td>Last Name</td>
            <td><span id='lastName'><%: Model.infoLastName%></span></td>
        </tr>
        <tr><td>Fathers Name</td>
            <td><span id='fatherName'><%: Model.infoFatherName%></span></td>
        </tr>
    </table>
    <input type="button" value="Edit" id="button" onclick="return button_onclick()" />
</div>

和脚本就像这样

$(function () {
    $("#button").click(function () {
        $("#name").replaceWith($('<input type=text>').attr({ id: 'name', value: $('#name').text() }));
        $("#lastName").replaceWith($('<input type=text>').attr({ id: 'lastName', value: $('#lastName').text() }));
        $("#fatherName").replaceWith($('<input type=text>').attr({ id: 'fatherName', value: $('#fatherName').text()}));
        $("#button").replaceWith($('<input type=Submit>').attr({ id: 'submit'}));
    });
});

Answer 3

$("#tabs-1").replaceWith(function() {
  return "<textarea>" + this.innerHTML + "</textarea>";
});

Answer 4

以下是一个有效的示例：http://jsfiddle.net/7DdKf/1/ 您可以监听div的“click”事件并使用jQuery的replace函数将<div>（或任何其他HTML元素）换成<textarea>

如何将Jquery <div>替换为可编辑的<textarea>？</textarea> </div>

4 个答案: