恢復到以前的狀態jQuery中

Question

這是通過計算器:)創建

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

活生生的例子：http://jsfiddle.net/5neff/7/

我怎麼能修改此 - 我想，如果我點擊以外的表，則表返回以前的狀態 - AAA BBB CCC DDD

Answer 1

代替live使用delegate，並貼在document點擊處理程序的狀態顯示重置下面的代碼。在您的代碼中，即使您的代碼已經打包，您也始終使用<div class="hide">包裝td內容。我在我的代碼中也照顧到了這一點。

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

Answer 2

捕獲像點擊外面的盒子是硬的事件，所以我做了一個復位按鈕：

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

jsFiddle