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

时间:2012-06-03 00:58:12

标签: jquery html-table

我需要一个html表,我点击任意一行中的一个值,然后整个行应该展开(向上或向下滑动动画会很好)我​​需要在行内插入一个图表。

我应该如何使用jQuery执行此操作,同样我可能需要将图表放在一个单独的文件中,并将该文件包含在行中的潜水或图表的更好容器中?

1 个答案:

答案 0 :(得分:1)

有很多方法可以做到这一点。我的示例使用了一个按钮,但您可以将click事件放在任何内容上。

http://jsfiddle.net/lucuma/Y4nC8/2/

这是一个例子

<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:

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

  });    
});