[stackoverflow] edit table cell

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

by sarathsprakash

HTML

<table>
    <tr>
        <td> row 1
        <input type="hidden" value="12345" class="Quoteid" />
        </td>
        <td><a class="edit" href="#">Edit</a><span>$100</span>
        
        </td>
        <td><a class="edit" href="#">Edit</a><span>Crocin</span>
        
        </td>
    </tr>
    <tr>
        <td> row 2
            <input type="hidden" value="11111" class="Quoteid" />
        </td>
        <td><a class="edit" href="#">Edit</a><span>$200</span></td>
        <td><a class="edit" href="#">Edit</a><span>Vicks</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.edit').click(function(){
    var $next = $(this).next();
    if ($next.is('input')){
        $('<span>').html($next.val()).replaceAll($next);
         alert($(this).parents('tr').find(".Quoteid").val());
        
    } else {
        $('<input>').val($next.html()).replaceAll($next).focus();
        
    }
    return false;
});

/*$( "table" ).delegate( "input", "blur", function() {

});*/