单击第一个 <td> 时展开表格行以显示更多内容答案

【问题标题】：Expand table row to reveal more content when clicking on first <td>单击第一个 <td> 时展开表格行以显示更多内容
【发布时间】：2013-12-11 21:12:23
【问题描述】：

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

第一个 td 将有一个图标 (+) 以显示有更多内容，单击时我希望它在加号和减号图标之间切换，具体取决于该行是否展开或折叠。

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

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

任何帮助都会很棒谢谢

【问题讨论】：

这更像是一个请求而不是一个问题。

标签： javascript jquery html css

【解决方案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')
    }
})

【讨论】：

【解决方案2】：

这是你需要的

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

在这里玩 fiddle

【讨论】：