負載表 - 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> 
</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/

我想：如果我點擊例如BBB的則不用BBB負載

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

Answer 1

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

Answer 2

使用這樣的事情，而不是：

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

load用於從服務器加載數據，而不是處理當前加載的文件。

這是上述代碼的working example。

Answer 3

改變你的JS到

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

.load()功能是加載數據（JSON等..爲Ajax）或綁定一個事件處理程序，而不是從一個元素中獲取HTML。

Answer 4

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

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

Answer 5

檢查更新的解決方案

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