Question

I trying to create an “edit in place” table cell. You click an edit link, and a text area appears in its place. I also only want to display the edit link when I hover over the table row. The problem I’m having with the following code is that the edit link always appears when you hover over the table row. How can I make it so that the hiding/showing, only happens when you are not currently editing.

HTML:

<td><a class="edit">Edit</a> $100</td>

jQuery:

$(document).ready(function(){

    $('a.edit').hide();

    $('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            $(this).find('a.edit').hide();
        }
    );

    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).hide();
        $(this).after('<input type="text" style="width:100%;" />');
    });
});

Answer 1

I’d probably do the hover in CSS. No need for javascript there. If you need to support IE6 with this feature, I’d make the javascript conditional.

Then add a class to the <tr> in the click() handler when you create the <input>. The CSS can keep the link hidden for the <tr> with the class.

Example: http://jsfiddle.net/gmS46/

CSS

tr a.edit {
    display:none;
}
tr:hover a.edit {
    display:inline;
}
tr.hasInput a.edit {
    display:none;
}​

jQuery

$(document).ready(function(){
    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).after('<input>').closest('tr').addClass('hasInput');
    });
});