How to change a label to textfield with jQuery when its respective link is clicked?

I have a table and I need that when a particular span is clicked, the span before it changes from a label to a text field. The following is the table:

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

Now lets say that the Alter after John Doe is clicked, the span before it has to change from just John Doe to a textfield (This applies also for all the others). This is how the result will look like if John Doe's alter span is clicked:

<table>
    <tbody>
        <tr>
            <td><span class="spanName"><input type="text" /></span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

If possible, and I think it is possible with jQuery by using :next or something of this sort, I have to implement this with using just classes and not IDs.

Also, if you think that I should use an anchor instead of a span, please let me know. I am using a span simply because开发者_如何学Go of the :next and :previous functionalities in jQuery.

Any help would be greatly appreciated

This will get you the textbox on click, allow you to adjust text, then on blur set the span back with the new text entered. Example

JavaScript

$('.spanName').click(function() {
    var $elem = $(this);
    var text = $elem.text();
    var input = $('<input value="' + text + '" />')
    $elem.text('').append(input);
    input.select();

    input.blur(function() {
        var text = input.val();
        input.parent().text(text);
        input.remove();
    });
});

HTML

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

Something like this:

$(".spanDefaultName").click(function() {
    var text = $(this).prev("span").text();
    $(this).prev("span").hide();
    $(this).before('<input value="' + text + '" />');
    $(this).unbind("click");
});

Demo: http://jsfiddle.net/karim79/MWwyR/4/

How's this? $('span.clickable').click(function () { $(this).prevAll('span').last().html('<input ....>'); });

I think this should do what you want

    $('span.spanDefaultName').click(function() {

       val = $(this).prev().text();
       $(this).prev().remove();
       $(this).parent().prepend($('<input type="text" value="' + val + '" />'));

    });

Though if you are going to submit this form your input will need a name attribute

you should be able to get this just how it is by doing:

$('.spanDefaultName').click(function() {
    if($(this).prev().find(':input').length) {
        var text = $(this).prev().val();
        $(this).prev().text(text);
    } else {
        var text = $(this).prev().text();
        $(this).prev().html('<input type="text" value="' + text + '"/>');
    }
});

This will get the text out of the span, create a text box, and insert your text into it. it will work for all instances of this on the page.

Edit: as per the updated request, this will toggle based on if there is an input element in the needed span. If so, it will revert to text using the value of the text box.