[stackoverflow] edit table cell

3971933/jquery-how-to-bind-to-the-events-of-a-parent-element

by danmana

HTML

<table>
    <tr>
        <td> row 1</td>
        <td><a class="edit" href="#">Edit</a><span>$100</span></td>
    </tr>
    <tr>
        <td> row 2</td>
        <td><a class="edit" href="#">Edit</a><span>$200</span></td>
    </tr>
</table>

CSS

td{
    border: 1px solid gray;
    padding:2px 4px;
}

td input{
    background-color: #EED;
}

td a.edit{
    display:none;
}

JavaScript

$('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            var $a = $(this).find('a.edit');
            if (!$a.next().is('input'))
                $a.hide();
        }
    );

$('a').click(function(){
    var $next = $(this).next();
    if ($next.is('input')){
        $('<span>').html($next.val()).replaceAll($next);
    } else {
        $('<input>').val($next.html()).replaceAll($next).focus();
    }
    return false;
});