Create text box on click

Question

Initially when the page loads the table will be displayed normally but when I click on the edit label it should make the first name value as text box to make it editable. I will enter the value and hit enter it will submit the form. I am really confused how to achieve this.

This is the sample table I have, I couldn't go beyond this.

<label id="edit" style="cursor:pointer; color:blue;">edit</label>

<table>
    <tr><td>First Name: </td>
        <td>John</td>
    </tr>
    <tr><td>Last Name: </td>
        <td>Wright</td>
    </tr>
</table>

jsfiddle

​

Answer 1

Don't complicate the things. Just add another <td> tag wit textbox and make it hidden. Then add some jsvascript which binds to click on label, hides <td> with static text and shows <td> with textbox. BTW you do not need label here, <span> is enough.

Answer 2

$('#edit').click(function() {
    var $table = $('table');
    if ($table.find('input').length) return;
    $table.find('td:nth-child(2)').html(function(i, v) {
        return '<input value=' + v + '>';
    })
})

$('table').on('blur', 'input', function() {
    $('table input').replaceWith(function() {
        return this.value;
    })
})

http://jsfiddle.net/cnuDh/