jQuery - 隐藏/折叠< table>行 [英] jQuery - hiding/collapsing a <table> row

问题描述

我想要表格行消失（通过动画的高度为0px和不透明度为0）。我使用以下

I want table rows to disappear (by animating their height to 0px and opacity to 0). I'm using the following

$('#somecellelement').closest('tr').children('td').css('overflow','hidden');
$('#somecellelement').closest('tr').children('td').animate({
    height: '0px',
    opacity: 0
},500);

其中 #somecellelement 的行我想隐藏。 Opacity 的动画正确，但表格行不会变小。如果我设置 height：500px 然后它工作，但我需要该行消失。

Where #somecellelement is something contained in cells of rows I want hidden. Opacity is animating correctly but the table row doesn't get smaller. If I set height: 500px then it works, but I need the row to disappear.

推荐答案

如果你可以应用<$元素中的每个< div> ，那么您可以正确地为它们设置动画。 jQuery不会对< tr> 和< td> 应用高度动画。高度动画只适用于 display：block 设置的元素。

If you can apply a <div> within each <td> element, then you can animate them properly. jQuery does not apply height animations to <tr> and <td>. The height animations only work on elements with display: block set, I believe.

p>

A small change:

$('#somecellelement').closest('tr').children('td').children('div').animate(
    {height: '0px',
     opacity: 0}, 500);  

完整示例：
http://jsfiddle.net/PvwfK/

这篇关于jQuery - 隐藏/折叠&lt; table&gt;行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！