负载表 - jQuery的 - 源码之家

问题描述：

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

尝试使用查询各 –

答

更改您的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/

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

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

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

答

使用这样的事情，而不是：

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

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

这是上述代码的working example。

答

改变你的JS到

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

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

答

或者更好的是（所有的最短版）：

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

答

检查更新的解决方案

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

负载表 - jQuery的

相关推荐