首先单击时展开表行以显示更多内容

Question

我有一个基本表，我希望能够扩展表行以查看有关该特定行的更多信息。

第一个td将有一个图标（+）来显示有更多内容，点击时我希望它在加号和减号图标之间切换，具体取决于行展开或折叠。

我有一个基本的演示： http://jsfiddle.net/e7X7H/1/

  $('table#hidden-table-info td.expand').click(function(){
     alert("expand / collapse and change icons around");
  });

任何帮助都会很棒 感谢

Answer 1

查看this fiddle

你想要的JS是：

$('tr td:first-child img').click(function(){
    var img=$(this);
    if(img.attr('src')=='http://www.stemcor.com/images/plus.gif'){
      // row expanded, so collapse...
      img.attr('src','http://www.stemcor.com/images/minus.gif');
    }else{
      // row collapsed, so expand...
      img.attr('src','http://www.stemcor.com/images/plus.gif')
    }
})

Answer 2

这就是你需要的

$('td').addClass("clickh");
$('.hideme').find('div').hide(); 
$('.clickh').click(function(){
$(this).parent().next('.hideme').find('div').slideToggle(500);
});

在这里玩耍 fiddle