如何替换Jquery<；部门>；要编辑<；textarea>；？

我想在单击按钮（“编辑”）时将我的Div标记替换为可编辑文本区域。这样，TextArea以可编辑的格式保存Div标记中的数据。

例如Div

名字
姓
父亲的名字

Jquery

$（函数（）{
$（“#按钮”）。单击（函数（）{$（“#选项卡-1”）
//在这里，我需要帮助将div标签替换为可编辑文本区域（或者每个td的表单都有可编辑文本字段，并带有提交和取消按钮），另外一个替换是将编辑按钮替换为提交和取消（两个按钮）
});
});

需要解决以下问题：：将div标记替换为可编辑文本区域，并添加一个替换项，即将编辑按钮替换为提交和取消（两个按钮），以便我可以提交对某个控制器操作所做的更改。

一种可能的解决方案：替换为其他元素（呈现的元素包含与div相同的数据，但格式可编辑，此外还包含提交和编辑按钮）

我该怎么做呢？

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

返回“+this.innerHTML+”；
});

谷歌的术语是“就地编辑”。您可以对jQuery使用在位编辑插件。这里有一个例子，看看它是否能满足您的需求。

下面是一个工作示例： 您可以监听div的“click”事件，并使用jQuery的replace函数将

（或任何其他HTML元素）替换为

.

我建议

<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'}));
    });
});

$（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#name”）.replacetwith（$（''）.attr（{id:'name'，value:$（'#name'）.text（））；
$（“#lastName”）.replacetwith（$（''）.attr（{id:'lastName'，value:$（'#lastName'）.text（））；
$（“#父名”）.replace为（$（''）.attr（{id:'fatherName'，value:$（'#fatherName'）.text（））；
$（“#按钮”）.replace为（$（''）.attr（{id:'submit'}））；
});
});

Peter InnerHtml我将显示所有html代码（连同标记）ithink@Gimmebrkk我想那是你想要的。如果不是，您希望在文本区域中显示什么？Peter我的主要目标是用可编辑视图替换div（单击编辑按钮），并将可编辑字段提交给某些控制器操作（单击提交按钮）

<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'}));
    });
});