jQuery - 隐藏/折叠行<table> </table>

Question

我希望表格行消失（通过将其高度设置为0px并将不透明度设置为0）。我正在使用以下

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

#somecellelement是我希望隐藏的行的单元格中包含的内容。 Opacity正确动画，但表格行不会变小。如果我设置height: 500px然后它可以工作，但我需要该行消失。

我无法从DOM中删除元素，因为脚本需要来自这些行中表单元素的值。

Answer 1

如果您可以在每个<div>元素中应用<td>，那么您可以正确设置它们的动画。 jQuery不会将高度动画应用于<tr>和<td>。高度动画仅适用于display: block设置的元素，我相信。

一个小小的变化：

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

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

Answer 2

正如Doozer Blake的回答所说，你不能将jQuery动画应用于<td>和<tr>元素。我也不喜欢事先将<div>元素添加到表中的每个单元格的想法，因为在大型表格中它会损害性能。

但是，只有在需要为行设置动画时，才能使用jQuery的wrapInner函数动态包装<td>的内容：

$('#somecellelement')
    .closest('tr')
    .children('td')
    .wrapInner('<div class="td-slider" />')
    .children(".td-slider")
    .slideUp();

关于填充的一个词

如果您的<td>元素具有填充，则还需要为完整的折叠效果设置动画。这可以通过CSS3过渡轻松完成：

$('#somecellelement').closest('tr').addClass('collapsed');

CSS：

td {padding:10px; transition:padding 1s;}
.collapsed > td {padding:0;}

Answer 3

您正在为孩子制作动画，为<tr>

制作动画

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