html切换表格行中的div内容

时间:2017-09-28 16:52:08

标签: php jquery html

我看到了这段代码,我想知道如何在点击相同按钮后隐藏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

1 个答案:

答案 0 :(得分:0)

您可能想尝试一下:

$('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());
  }
});

评论解释代码。