2011-09-05 56 views
0
<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> 
</table> 



.table td { 
    width: 50px; 
    height: 50px 
} 

.tablehide td { 
    width: 25px; 
    height: 50px; 
    display:none; 
} 


$(".clicked").live('click', function() { 
    $(this).load($('.tablehide')) 
    }); 

活生生的例子:http://jsfiddle.net/5neff/2/负载表 - jQuery的

我想:如果我点击例如BBB的则不用BBB负载

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

尝试使用查询各 –

回答

3

更改您的jQuery来如下:

$(".clicked").live('click', function() { 
    $(this).html($('.tablehide')); 
    $('.tablehide td').show(); 
}); 

直播链接:http://jsfiddle.net/5neff/3/

或者你可以克隆它来复制,通过使用.clone()

$(".clicked").live('click', function() { 
    $(this).html($('.tablehide:last').clone()); 
    $('.tablehide:not(:last) td').show(); 
}); 

直播链接:http://jsfiddle.net/5neff/4/

什么基本的情况是,目前单击项目的HTML设置为隐藏表格,然后使表格中的html可见。

UPDATE [保持原有数据]

$(".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/

UPDATE [表点击隐藏,并保持原有数据]

$(".clicked").live('click', function() { 
    $(".clicked .tablehide").remove(); 
    $(".clicked").find('div:first').show(); 
    $(this).wrapInner('<div class="hide">'); 
    $(this).find('div:first').hide() 
    $(this).prepend($('.tablehide:last').clone()); 
    $('.clicked .tablehide td').show(); 
}); 


$(".tablehide").live('mouseup', function() { 
    $(".clicked .tablehide").remove(); 
    $(".clicked div.hide").show(); 
}); 

直播链接: http://jsfiddle.net/5neff/8/

+0

感谢,怎样才能让我是否取消勾选那么让我看看老秀? –

+0

如果我选择AAA这很好,但如果我选择BBB,那么在AAA仍然是新表 –

+0

好吧会做出更改,让你知道一旦更新。 –

1

使用这样的事情,而不是:

$(".clicked").live('click', function() { 
    $(this).html($('.tablehide').html()) 
}); 

load用于从服务器加载数据,而不是处理当前加载的文件。

这是上述代码的working example

1

改变你的JS到

$(".clicked").live('click',function(){ 
    $(this).html($('.tablehide').html()); 
}); 

.load()功能是加载数据(JSON等..为Ajax)或绑定一个事件处理程序,而不是从一个元素中获取HTML。

1

或者更好的是(所有的最短版):

$(".clicked").live('click', function() { 
    $(this).html($('.tablehide').show().html()); 
}); 
1

检查更新的解决方案

http://jsfiddle.net/5neff/6/

$('.clicked').each(function() { 
    $(this).click(function() { 
     htmlVal = $('.tablehide')[0].outerHTML; 
     $(this).html(htmlVal); 
     $(this).find(".tablehide").css("display","block"); 
     $(this).find(".tablehide td").css("display","block"); 
    }); 
    });