使用 .show("slow") 显示新添加的表格行答案

【问题标题】：Showing newly added table row using .show("slow")使用 .show("slow") 显示新添加的表格行
【发布时间】：2008-10-15 09:11:34
【问题描述】：

我正在克隆一个隐藏的表格行，然后填充它，验证后我想使用 jquery 效果显示该行...比如 .show("slow")

var baseRow = $("#tasks tr#baseTaskLine");
var newRow = baseRow.clone();
var lastRow = $("#tasks tr[id^='TaskLine_']" + dayClass + ":last");

var newRowId;
if (lastRow.length == 0) {
   newRowId = "TaskLine_new0";
}
else {
   newRowId = "TaskLine_new" + lastRow[0].rowIndex;
}

newRow.attr("id", newRowId);

:
[populate new row]
:

if (lastRow.length == 0) {
   baseRow.after(newRow);
}
else {
   lastRow.after(newRow);
}
newRow.hide();
:

:
[validate via webservice call]
:
newRow.show("slow");

这确实显示了该行，但它会立即出现。我尝试隐藏该行的所有 <td> 元素，然后显示这些元素，这似乎确实有效，但是每个 <td> 添加了一些奇怪的样式，这会干扰格式，即 style="display: block;"

【问题讨论】：

现在这是一个相当老的问题，但我只是想我会警告一句：对表行使用show('slow') 会导致我在 Linux 上的 Firefox 和 Chrome 中出现 100% 的 CPU 峰值. show() 工作正常，奇怪。

标签： jquery

【解决方案1】：

这不会以这种方式工作。表格行和单元格不打算显示为块，因此显示/淡入淡出效果不会直接作用于表格行。

但是，您可以在每个单元格中放置一个

，如下所示：

<table>
<tr id="row1"><td><div>Cell1:1</div></td><td><div>Cell2:1</div></td></tr>
<tr id="row2"><td><div>Cell1:2</div></td><td><div>Cell2:2</div></td></tr>
</table>

然后到以下：

$('#row2 td div').show('slow');

这将产生预期的行为。

【讨论】：

谢谢，这在 FireFox 上效果很好，但是在 IE7 上仍然不能正确显示（应该从类继承的粗体样式丢失了）。
你可以把 style="font-weight:bold;"进入每个div。更好的是，您可以创建一个类似 b{font-weight:bold;> 的 CSS 类，然后为每个 div 应用 class="b"，
抱歉，那是
b{font-weight:bold;} 和。 Stackoverflow 吃了我的字符。
是的，我的观点是上的 CSS 类并没有完全应用于 IE 中的
，我会尝试专门添加它

【解决方案2】：

您能否为该行的高度属性设置动画？我不确定这是否可行，但它可能比添加额外标记要简单得多。

<table id="myTable">
    <tbody>
        <tr><td>Row 1,1</td><td>Row 1,2</td></tr>
        <tr><td>Row 2,1</td><td>Row 2,2</td></tr>
    </tbody>
</table>

还有这个：

// get the row you're after.
var $row = $("#myTable tr:last");
// store its height
var h = $row.height();

$row
    .css("height", 0)    // set the height back to 0
    .animate({
        height : h + "px"    // animate it back to normal.
    }, "slow")
;

【讨论】：

【解决方案3】：

我写了一个 jQuery 插件，可以让你做到这一点。您可以添加和删除行（带有动画），并且不需要用 div 或类似的东西包装您的数据。查看http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

最好的，

弗莱奇

【讨论】：