jQuery Editable Table

Using contentEditable attribute.

HTML

<table class='editable'>
    <tr id='r0'>
        <td class="left">100.00</td>
        <td class="center">110.00</td>
        <td class="right">120.00</td>
        <td><button id="button1">edit</button></td>
    </tr>
    <tr id='r1'>
        <td class="left">200.00</td>
        <td class="center">210.00</td>
        <td class="right">220.00</td>
        <td><button id="button1">edit</button></td>
    </tr>
</table>

CSS

table.editable {
    width: 400px;
}

table.editable td {
    border: 1px solid #ccc;
}

JavaScript

$('table.editable > button').click(function () {
    var cellId = [$(this).attr('class'), $(this).parent('tr').attr('id')];
    
    if ($(this).attr("contentEditable") == true) {
        console.debug('Cell', cellId, 'is now *not* editable');
        $(this).attr("contentEditable", "false");
    } 
    else {        
        console.debug('Cell', cellId, 'is now editable');
        $(this).attr("contentEditable", "true");
        $(this).select();
    }
})