I've got a table I want users to be able to update on the fly (but can't use the Editable Table plugin, as I have other values I need to send with the form).

I want to show a form within the table cell once they click the cell. I've got as far to allow them to click the cell (and show the form), but they can't click the new textbox because it then they've clicked the table cell again.

Here's my JQuery:

```
$(function(){
// clicking on a TD cell
$('td').click(function(){
    // check that it's a valid cell
    if($(this).attr('employee').length > 0){;
        // is it an active shift?
        if($(this).attr('activeshift') == 1){
            // yes
        }else{
            // no - we show the form
            var form = '<form class="add_shift" id="add_shift"> \
                    <input type="text" name="shift" /> \
                    <input type="hidden" name="employee" value="' + $(this).attr('employee') + '" /> \
                    <input type="hidden" name="day" value="' + $(this).attr('day') + '" /> \
                    <input type="hidden" name="current_week" value="' + $(this).attr('current_week') + '" /> \
                    <br /> \
                    <small>Ex: 09:00 - 17:00 or 22:00 - 06:00</small> \
                </form>';
            // update content
            $(this).html(form);
        }
    }
});

```

});

Here's a sample cell:

```
<td employee="10" day="3" current_week=1" activeshift=""></td>

```

How do I allow the user to click the input within the cell?

And is there any way to remove the contents if they click away from the cell?

Thanks in advance.