Как заменить Jquery <div>на редактируемые <textarea>?

Question

Я хочу заменить свой тег Div на редактируемую текстовую область при нажатии кнопки («# Edit»).Так что TextArea содержит данные, представленные в теге Div в редактируемом формате. Например.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 на редактируемую текстовую область с одной дополнительной заменой, которая заменяет кнопку «Изменить» на кнопку «Отправить» и кнопку «Отмена» (две кнопки), чтобы я мог отправить изменения, внесенные в действие контроллера. Одно возможное решение :: заменить на какой-либо другой элемент (визуализированный элемент, содержащий те же данные, которые содержат div, но в редактируемом формате, кроме того, он также содержит кнопки Submit и Edit)Как насчет этого я должен пойти на это?

Answer 1

Термин Google для "изменить на месте".Вы можете использовать Jeditable Плагин редактирования на месте для jQuery.Есть демо-страница , чтобы узнать, сможет ли она сделать то, что вы ищете.

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

Вот рабочий пример: http://jsfiddle.net/7DdKf/1/ Вы можете прослушать событие click для div и использовать функцию замены jQuery, чтобы заменить <div> (или любой другой элемент HTML) на <textarea>

.

Answer 4

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