Question

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();


    $(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

Answer 1

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());
});