如何在表格行上使用slideDown（或show）函数？
我正在尝试向表中添加一行并将该行滑入视图中，但是 Slidedown 函数似乎向表行添加了 display:block 样式，这会弄乱布局。
有什么想法可以解决这个问题吗？
这是代码：
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.
Any ideas how to work around this?
Here's the code:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（21）
表行不支持动画。
摘自 Chaffer 和 Swedberg 的“学习 jQuery”
您可以将 td 内容包装在 div 中并在其上使用 SlideDown。 您需要决定动画是否值得额外的标记。
Animations are not supported on table rows.
From "Learning jQuery" by Chaffer and Swedberg
You can wrap your td contents in a div and use the slideDown on that. You need to decide if the animation is worth the extra markup.
我只是动态地包装 tr，然后在 SlideUp/slideDown 完成后将其删除。 添加和删除一个或几个标签，然后在动画完成后删除它们，这是一个相当小的开销，我根本没有看到任何明显的滞后。
SlideUp:
SlideDown:
我必须向 fletchzone.com 致敬，因为我采用了他的插件并将其剥离回上面。
I simply wrap the tr dynamically then remove it once the slideUp/slideDown has complete. It's a pretty small overhead adding and removing one or a couple of tags and then removing them once the animation is complete, I don't see any visible lag at all doing it.
SlideUp:
SlideDown:
I have to pay tribute to fletchzone.com as I took his plugin and stripped it back to the above.
这是我为此编写的一个插件，它需要一些 Fletch 的实现，但我的插件仅用于向上或向下滑动行（不插入行）。
基本用法：
将幻灯片选项作为单独的参数传递：
基本上，对于向下滑动动画，插件将单元格的内容包装在 DIV 中，对它们进行动画处理，然后删除它们，反之亦然，向上滑动（需要一些额外的步骤来消除单元格填充）。 它还返回您调用它的对象，因此您可以像这样链接方法：
希望这对某人有帮助。
Here's a plug-in that I wrote up for this, it takes a little from Fletch's implementation, but mine is used solely to slide a row up or down (no inserting rows).
Basic Usage:
Pass slide options as individual arguments:
Basically, for the slide down animation, the plug-in wraps the contents of the cells in DIVs, animates those, then removes them, and vice versa for the slide up (with some extra steps to get rid of the cell padding). It also returns the object you called it on, so you can chain methods like so:
Hope this helps someone.
我需要一个带有隐藏行的表格，可以在单击行时滑入和滑出视图。
I neded a table with hidden rows that slide in and out of view on row click.
您可以尝试将行的内容包装在
中，并让选择器为$('#detailed_edit_row span');- 有点黑客，但我刚刚测试过，它有效。 我还尝试了上面的table-row建议，但它似乎不起作用。更新：我一直在解决这个问题，并且从所有迹象来看，jQuery 需要它执行 SlideDown 的对象成为一个块元素。 所以，没有骰子。 我能够想象出一个表格，我在单元格上使用了 SlideDown ，它根本不影响布局，所以我不确定你的表格是如何设置的。 我认为你唯一的解决方案是以这样的方式重构表格，即可以将该单元格作为一个块，或者只是
.show();该死的东西。 祝你好运。You could try wrapping the contents of the row in a
<span>and having your selector be$('#detailed_edit_row span');- a bit hackish, but I just tested it and it works. I also tried thetable-rowsuggestion above and it didn't seem to work.update: I've been playing around with this problem, and from all indications jQuery needs the object it performs slideDown on to be a block element. So, no dice. I was able to conjure up a table where I used slideDown on a cell and it didn't affect the layout at all, so I am not sure how yours is set up. I think your only solution is to refactor the table in such a way that it's ok with that cell being a block, or just
.show();the damn thing. Good luck.选择该行的内容，如下所示：
.contents() -
获取匹配元素集中每个元素的子元素，包括文本和注释节点。
Select the contents of the row like this:
.contents() -
Get the children of each element in the set of matched elements, including text and comment nodes.
我回答这个问题有点落后了，但我找到了一种方法:)
我只是将一个 div 元素放在表数据标签内。 当它设置为可见时，当 div 展开时，整行都会下降。
然后告诉它淡出（然后超时，以便您看到效果），然后再次隐藏表格行:)
希望这对某人有帮助！
I'm a bit behind the times on answering this, but I found a way to do it :)
I just put a div element inside the table data tags. when it is set visible, as the div expands, the whole row comes down.
then tell it to fade back up (then timeout so you see the effect) before hiding the table row again :)
Hope this helps someone!
我确实使用了这里提供的想法，但遇到了一些问题。 我把它们全部修好了，并有一个流畅的台词我想分享。
它在 td 元素上使用 css。 它将高度减少到 0px。 这样，只有每个 td 元素内新创建的 div 包装器内容的高度很重要。
SlideUp 速度很慢。 如果你让它变得更慢，你可能会发现一些故障。 一开始有一个小跳跃。 这是因为提到的 css 设置。 但如果没有这些设置，行的高度就不会减少。 只有它的内容会。
最后 tr 元素被删除。
整行只包含 JQuery，没有原生 Javascript。
希望能帮助到你。
这是一个示例代码：
I did use the ideas provided here and faced some problems. I fixed them all and have a smooth one-liner I'd like to share.
It uses css on the td element. It reduces the height to 0px. That way only the height of the content of the newly created div-wrapper inside of each td element matters.
The slideUp is on slow. If you make it even slower you might realize some glitch. A small jump at the beginning. This is because of the mentioned css setting. But without those settings the row would not decrease in height. Only its content would.
At the end the tr element gets removed.
The whole line only contains JQuery and no native Javascript.
Hope it helps.
Here is an example code:
有一个带有嵌套表的表行：
slideDown 行：
注意： 该行及其内容（这里是
"table"）都应该隐藏 在动画开始之前。对于 slideUp 行：
第二个参数 (
function()) 是回调。简单！！
请注意，还有几个选项< /strong> 可以添加为向上/向下滑动功能的参数（最常见的是
'slow'和'fast'的持续时间）。Have a table row with nested table:
To slideDown the row:
Note: the row and it's content (here it is
"table") both should be hidden before animation starts.To slideUp the row:
The second parameter (
function()) is a callback.Simple!!
Note that there are also several options that can be added as parameters of the slide up/down functions (the most common being durations of
'slow'and'fast').我通过使用行中的 td 元素解决了这个问题：
对行本身进行动画处理会导致奇怪的行为，主要是异步动画问题。
对于上面的代码，我突出显示了在表中拖放的一行，以突出显示更新已成功。 希望这对某人有帮助。
I've gotten around this by using the td elements in the row:
Animating the row itself causes strange behaviour, mostly async animation problems.
For the above code, I am highlighting a row that gets dragged and dropped around in the table to highlight that the update has succeeded. Hope this helps someone.
我想滑动整个身体，我通过结合淡入淡出和幻灯片效果解决了这个问题。
我分三个阶段完成了此操作（如果您想向下或向上滑动，则替换第二步和第三步）
向上滑动的示例：
I want to slide whole tbody and I've managed this problem by combining fade and slide effects.
I've done this in 3 stages (2nd and 3rd steps are replaced in case you want to slide down or up)
Example of slideUp:
我对所有其他提供的解决方案都遇到了问题，但最终做了这个像黄油一样光滑的简单事情。
像这样设置你的 HTML：
然后像这样设置你的 javascript：
基本上，使“不可见”行高 0px，里面有一个 div。
在 div（而不是行）上使用动画，然后将行高设置为 1px。
要再次隐藏该行，请在 div 上使用相反的动画并将行高设置回 0px。
I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter.
Set up your HTML like so:
Then set up your javascript like so:
Basically, make the "invisible" row 0px high, with a div inside.
Use the animation on the div (not the row) and then set the row height to 1px.
To hide the row again, use the opposite animation on the div and set the row height back to 0px.
我喜欢 Vinny 编写并一直在使用的插件。 但对于滑动行（tr/td）内的表，即使向上滑动，嵌套表的行也始终隐藏。 因此，我在插件中做了一个快速而简单的修改，不要隐藏嵌套表的行。 只需将以下行更改
为
仅查找直接 td，而不查找嵌套 td。 希望这可以帮助使用该插件并拥有嵌套表的人。
I liked the plugin that Vinny's written and have been using. But in case of tables inside sliding row (tr/td), the rows of nested table are always hidden even after slid up. So I did a quick and simple hack in the plugin not to hide the rows of nested table. Just change the following line
to
which finds only immediate tds not nested ones. Hope this helps someone using the plugin and have nested tables.
我想在 #Vinny 的帖子中添加评论，但没有代表，所以必须发布答案...
发现您的插件存在错误 - 当您仅传递带有参数的对象时，如果没有其他参数，它们会被覆盖通过更改处理参数的顺序可以轻松解决，代码如下。
我还添加了一个在关闭后销毁行的选项（仅当我需要它时！）： $('#row_id').slideRow('up', true); // 销毁该行
I'd like to add a comment to #Vinny's post but dont have the rep so have to post an answer...
Found a bug with your plugin - when you just pass an object in with arguments they get overwritten if no other arguments are passed in. Easily resolved by changing the order the arguments are processed, code below.
I've also added an option for destroying the row after closing (only as I had a need for it!): $('#row_id').slideRow('up', true); // destroys the row
如果您需要同时滑动和淡入表格行，请尝试使用这些：
If you need to slide and fade a table row at the same time, try using these:
你可以使用这些方法，例如：
you can use these methods like:
如果您将行中的 td 设置为不显示，同时开始对行上的高度进行动画处理，我就可以完成
I can be done if you set the td's in the row to display none at the same time you start animating the height on the row
这段代码有效！
This code works!
http://jsfiddle.net/PvwfK/136/
});
http://jsfiddle.net/PvwfK/136/
});
Vinny 提供的插头非常，但我发现并修复了一些小问题。
对于具有大量内容的表格单元格（例如具有大量行的嵌套表格），调用slideRow('up')，无论提供的slideSpeed值如何，一旦填充，它就会折叠行的视图动画完成了。 我修复了这个问题，以便在包装上的 slipUp() 方法完成之前不会触发填充动画。
<前><代码>(函数($){
var SR = {
默认值：{
滑动速度：400
，缓动：假
, 回调: false
}
, thisCallArgs:{
滑动速度：400
，缓动：假
, 回调: false
}
， 方法：{
上：函数（arg1，arg2，arg3）{
if(typeof arg1 == '对象'){
for(arg1 中的 p){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != '未定义' && (typeof arg1 == '数字' || arg1 == '慢' || arg1 == '快')){
sR.thisCallArgs.slideSpeed = arg1;
}别的{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(arg2 的类型 == '字符串'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == '函数'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == '未定义'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == '函数'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == '未定义' && typeof arg2 != '函数'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, 函数(){
$(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
完成：函数(){
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({ 'display': 'none' });
$(this).css({ 'padding': currentPadding });
}
});
});
var wait = setInterval(函数(){
if($cellContentWrappers.is(':animated') === false){
清除间隔（等待）；
if(typeof sR.thisCallArgs.callback == '函数'){
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
返回$（这个）；
}
，向下：函数（arg1，arg2，arg3）{
if(typeof arg1 == '对象'){
for(arg1 中的 p){
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != '未定义' && (typeof arg1 == '数字' || arg1 == '慢' || arg1 == '快')){
sR.thisCallArgs.slideSpeed = arg1;
}别的{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(arg2 的类型 == '字符串'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == '函数'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == '未定义'){
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == '函数'){
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == '未定义' && typeof arg2 != '函数'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).children('td, th');
$cells.wrapInner('
The plug offered by Vinny is really close, but I found and fixed a couple of small issues.
For table cells with lots of content (like a nested table with lots of rows), calling slideRow('up'), regardless of the slideSpeed value provided, it'd collapse the view of the row as soon as the padding animation was done. I fixed it so the padding animation doesn't trigger until the slideUp() method on the wrapping is done.
快速/简单的修复：
使用 JQuery .toggle() 显示/隐藏任一行的单击行或锚。
需要编写一个函数来识别您想要隐藏的行，但切换会创建您正在寻找的功能。
Quick/Easy Fix:
Use JQuery .toggle() to show/hide the rows onclick of either Row or an Anchor.
A function will need to be written to identify the rows you would like hidden, but toggle creates the functionality you are looking for.