Question

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

现场例子：http://jsfiddle.net/5neff/7/

我怎么能修改这个 - 我想如果我点击外面的表然后表返回到以前的状态 - aaa bbb ccc ddd

Answer 1

抓住像在盒子外面点击的事件很难，所以我做了一个重置按钮：

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

jsFiddle

Answer 2

而不是live使用delegate并在document上附加点击处理程序以重置状态，如下面的代码所示。在您的代码中，您始终将td内容与<div class="hide">包装在一起，即使它已被包装。我也在我的代码中处理过这个问题。

正在使用 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());
});

在jquery中返回到先前的状态

2 个答案: