изменить метку на текстовое поле с помощью jQuery?

Question

Как я могу изменить метку на текстовое поле с помощью jQuery? Например, у меня есть 2 кнопки, одна - редактировать, другая - вид. Когда пользователь нажимает кнопку редактирования, все элементы управления метками превращаются в текстовые поля. С другой стороны, при использовании кнопки просмотра все текстовые поля изменяются на метки. Я знаю, что могу использовать свойство «Видимый» для видимого контроля. Но на моей странице слишком много контроля. Я потратил много времени на программирование. Может кто-нибудь мне помочь?

Answer 1

Вы можете использовать функцию jQuery replaceWith.

$( "label" ).replaceWith( function() {
    return "<input type=\"text\" value=\"" + $( this ).html() + "\" />";
});

Демо: http://jsfiddle.net/eqne2/1/

Answer 2

Я думаю, вам нужно изменить текст кнопки, когда пользователь нажимает на нее.

Если это так, попробуйте следующее: http://jsfiddle.net/kasdega/MGCVW/

$(document).ready(function() {
    $(".textButton").click(function() {
        var me = $(this);

        me.hide();
        me.after("<input id='tmpInput'/>");
        $("#tmpInput").focus();
        $("#tmpInput").bind("keyup", function(e) {
            e.preventDefault();
            if (e.keyCode == '13') {
                var value = $(this).val();
                $(this).remove();
                if(me.is("input")) {
                    me.val(value);
                } else if(me.is("button")) {
                    me.text(value);
                }
                me.show();
            }
            return false;
        });
    });
});