在 jQuery 中动画删除表行
我编写了一些 jQuery 代码，以便在从表中删除行时使用“slideUp”动画。 为了使动画看起来流畅，我用 DIV 标签将行中每个 TD 的内容包裹起来，并在 DIV 上调用 slipUp 函数，在动画完成后删除实际的 TD。 其代码如下：
$("tr[id$=" + rowID + "]").children("td").each(function() {
$(this).children("div").slideUp(function() {
$(this).parent().remove();
});
});
到目前为止，一切都很好。 但是，我注意到这段代码并没有删除实际的 TR，只是删除了它的内容，因此我添加了以下行来删除 TR：
$("tr[id$=" + rowID + "]").remove();
问题是，在添加上面的行后，动画停止工作。 换句话说，该行只是消失了，没有良好的滑动效果。 有谁知道为什么会这样以及如何解决它？
I have written some jQuery code to use the "slideUp" animation when deleting rows from a table. In order for the animation to appear smooth, I wrapped the contents of each TD in the row with DIV tags, and called the slideUp function on the DIVs, removing the actual TDs upon completion of the animation. The code for that is as follows:
$("tr[id$=" + rowID + "]").children("td").each(function() {
$(this).children("div").slideUp(function() {
$(this).parent().remove();
});
});
So far, so good. However, I noticed that this code does not remove the actual TR, only its contents, so I added the following line to remove the TR:
$("tr[id$=" + rowID + "]").remove();
The problem is that after I added the line above, the animation quit working. In other words, the row simply disappears without the nice sliding effect. Does anybody know why this is so and how to get around it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因为您要删除包含所有动画元素的
tr。 不再有元素，不再有动画。 鉴于所有slideUp应该花费相同的时间，您可能可以通过从$(this).parent().remove()< 更改完成回调来逃脱/code> 到$(this).closest('tr').remove()。Because you're removing the
trthat contains all of the animated elements. No more elements, no more animation. Given that all of theslideUps should be taking the same amount of time, you can probably get away with changing the finish callback from$(this).parent().remove()to$(this).closest('tr').remove().我写了一个 jQuery 插件，可以让你做到这一点。 您可以添加和删除行，并且不需要用 div 或类似的东西包装您的数据。 请访问 http:// www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx
最好，
Fletch
I wrote a jQuery plugin that lets you do this. You can add and remove rows and it doesn't require wrapping your data with a div or anything like that. Check it out at http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx
Best,
Fletch