return to previous state in jquery

This was created by stackoverflow :)

<table border="2" class="table">
    <tr> <td class="clicked">aaa </td> <td class="clicked">bbb </td> </tr>
    <tr> <td class="clicked">ccc </td> <td class="clicked">ddd </td> </tr>
</table>

<table border="2" class="tablehide">
    <tr> <td> 111</td> </tr>
    <tr> <td> 222</td> </tr>
</table>


$(".clicked").live('blur', function() {
     $(".clicked").find('.tablehide').remove();
 });

$(".clicked").live('click', function() {
    $(".clicked").find('div:first').show()开发者_C百科;


    $(this).wrapInner('<div class="hide">');
    $(this).find('div:first').hide()
    $(this).prepend($('.tablehide'));
    $('.tablehide td').show();
    });

LIVE EXAMPLE: http://jsfiddle.net/5neff/7/

how can i modify this - i would like that if i click outside table then table return to previous state - aaa bbb ccc ddd

Instead of live use delegate and attach a click handler on document to reset the state as show in the below code. In your code you were always wrapping the td content with <div class="hide"> even if its already wrapped. I have also taken care of that in my code.

Working demo

$(".table").delegate('.clicked', 'click', function(e) {
    $(".clicked").find('div:first').show();
    if($(this).find(".hide").length == 0){
        $(this).wrapInner('<div class="hide">');
    }
    $(this).find(".hide").hide();
    $(this).prepend($('.tablehide').show());
    $('.tablehide td').show();
    e.stopPropagation();
});

$(document).click(function(){
    $(".table").find("div.hide").show();
    $(document.body).append( $(".table").find(".tablehide").hide());
});

Catching an event like clicking outside a box is hard, so i made a reset button:

$('#reset').click(function(event) {
    $(".tablehide td").hide();
    $(".clicked div").show();
});

jsFiddle