Simple table inline edit

Demo to show inline editing in a table using jquery.

HTML

<table class="table table-striped" id="table-visual-features">
    <tbody>
        <tr>
            <td>x</td>
            <td>Numeric</td>
            <td>Values to be mapped to the x-axis</td>
            <td>
                <button class="action_change">change</button>
                <button class="action-add-visual-feature">add</button>
            </td>
        </tr>
                <tr>
            <td>x</td>
            <td>Numeric</td>
            <td>Values to be mapped to the x-axis</td>
            <td>
                <button class="action_change">change</button>
                <button class="action-add-visual-feature">add</button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$('.action_change').live('click', function(){
    $($(this).closest('tr').children('td')[1]).html('<input id="row-value-edit" type="text" value="' + $($(this).closest('tr').children('td')[1]).text() + '" /><button class="row-value-ok">OK</button>');
    
 console.log($(this).closest('tr').children('td').val());
});