Jquery 更改表格行高并在行中添加更多数据

我需要有一个html表格，在其中我点击任何一行中的一个值，然后整行应该展开（用幻灯片动画向上或向下都很好），我需要在该行中插入一个图表

---

我应该如何使用jQuery实现这一点，而且我可能需要将图表放在一个单独的文件中，并将该文件包含在行中的下潜位置或图表的一些更好的容器中？

有很多方法可以做到这一点。我的例子使用了一个按钮，但是你可以把点击事件放在任何东西上

这里有一个例子

<table>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
 <tr><td>Col</td><td>Col</td><td><button>Add stuff</button></td></tr>
</table>​

添加东西
添加东西
添加东西
添加东西
添加东西
​

js:

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var$newstuff=$（“我的数据
更多数据
好的”）；
$newstuff.appendTo（$（this.closest（'tr'）.find（'td:eq（0））.slideDown（）；
});    
});

---

​

我尝试过像js函数一样调用行值，在函数中我尝试做$（this）.closest（'tr'）。height（'100'）。这不起作用。如果向表格单元格中添加内容，该行将自动展开。。不确定为什么需要设置高度。您可以添加数据并对该数据进行fadeIn或滑出。好的，谢谢您的提示，但我会将数据放在一个div中，单击该div时，我会将其放置或放置在何处？在柱子的内侧？我希望数据替换该行的现有内容。这与我想要的非常接近。我只希望在展开的行上有一个关闭按钮，该按钮将再次向上滑动该行并显示以前的内容。无论如何，非常感谢添加一个关闭按钮非常简单。。您只需

$（'btn'）。单击（function（）{$（this）.closest（'div'）.slideUp（）；}）
$(document).ready(function() {
  $('button').click(function() {
    var $newstuff = $('<div>my data<br />more data <br /> ok good</div>');
    $newstuff.appendTo($(this).closest('tr').find('td:eq(0)')).slideDown();

  });    
});