改變表格行高並在行中添加更多數據

Question

我需要一個html表格，我點擊任意行中的一個值，然後整個行應該展開（向上或向下滑動動畫會很好）我需要在行內插入一個圖表。

我應該如何使用jquery來做到這一點，我也可能需要將圖表放在單獨的文件中，並將該文件包含在行中的潛水或圖表的一些更好的容器中？

在此先感謝。

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

    });  
});