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

【问题标题】：jQuery - hiding/collapsing a <table> row [duplicate]jQuery - 隐藏/折叠 <table> 行
【发布时间】：2011-09-27 03:56:04
【问题描述】：

我希望表格行消失（通过将它们的高度设置为 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 中删除该元素，因为脚本需要这些行中表单元素的值。

【问题讨论】：

是否有理由没有说明您正在为 td 元素而不是 #somecellelement 直接设置动画？您遇到的问题是 tr 和 td 未设置为显示块类型，这导致尝试将其高度设置为 0 时出现问题。
#somecellelement 不应该是动画的。它只是一个需要隐藏其父行的。
好吧，在 tr 或 td 上实现高度动画会遇到问题，这就是我问的原因，它们似乎不起作用。下面发布的 2 个解决方案是我假设没有做你正在寻找的具体内容。我正在阅读它，您希望它为高度设置动画，直到该行消失。
是的，完全正确。我需要使用因为它是实际的表格数据。哦，如果它不能完成，那么 display:none 将不得不做

假设您可以将
的内容包装在
中

标签： jquery css

【解决方案1】：

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

一个小改动：

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

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

【讨论】：

实际上高度动画在我的情况下有效，但只有当我将它们设置为比最初更大的东西时。我的问题似乎是由于某种原因无法将表行溢出设置为隐藏。

【解决方案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;}

【讨论】：

【解决方案3】：

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

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

【讨论】：

同样的事情，不起作用。我尝试为孩子制作动画，因为我读到动画表格行存在问题，我忘了把它放回原来的样子。