表格行中的html toggle div內容

Question

我看到了這段代碼，我想知道如何在單擊同一個按鈕後隱藏div內容。我試着放置.toggle（），但我不知道該把它放在哪裏。我仍然在學習javascript和jquery，我正在練習很多問題。

JS：

$(document).delegate('input[type="button"]','click',function(){ 
    $('[colspan="5"]').parent('tr').remove(); 
    $(this).parents('tr').after('<tr/>').next().append('<td colspan="5"/>').children('td').append('<div/>').children().css('background','#f0f0f0').html($('#content').html()); 
}); 

fiddle

Answer 1

你可能想試試這個：

$('input[type="button"]').on('click', function(){ 

    // check if its a toggle by asking if it exists and is next to my TR 
    if($(this).parent('td').parent('tr').next('tr').children('td#temp').length === 1){ 

    // toggle the td 
    $('td#temp').toggle(); 

    } else { 

    // remove other content divs 
    $('td#temp').parent().remove(); 

    // perform insertion of content div 
    $(this).parents('tr') 
      .after('<tr/>') 
      .next().append('<td id="temp" colspan="5"/>') 
      .children('td') 
      .append('<div/>') 
      .children() 
      .css('background','#f0f0f0') 
      .html($('#content').html()); 
    } 
}); 

評論解釋代碼。