我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。

有什么解决办法吗?

代码如下:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

当前回答

在表行上不支持动画。

来自Chaffer和Swedberg的“学习jQuery”


表行显示特定的 动画的障碍,因为浏览器 使用不同的值(table-row和 块)用于它们的可见显示 财产。.hide()和.show() 方法,没有动画,总是 用于表行是安全的。的 jQuery 1.1.3版本,.fadeIn()和 . fadeout()也可以使用。


你可以把td的内容包装在一个div中,并在上面使用滑动。您需要决定动画是否值得额外的标记。

其他回答

如果你把行中的td设置为不显示就可以了同时你开始动画行的高度

tbody tr{
    min-height: 50px;
}
tbody tr.ng-hide td{
    display: none;
}
tr.hide-line{
    -moz-transition: .4s linear all;
    -o-transition: .4s linear all;
    -webkit-transition: .4s linear all;
    transition: .4s linear all;
    height: 50px;
    overflow: hidden;

    &.ng-hide { //angularJs specific
        height: 0;
        min-height: 0;
    }
}

在表行上不支持动画。

来自Chaffer和Swedberg的“学习jQuery”


表行显示特定的 动画的障碍,因为浏览器 使用不同的值(table-row和 块)用于它们的可见显示 财产。.hide()和.show() 方法,没有动画,总是 用于表行是安全的。的 jQuery 1.1.3版本,.fadeIn()和 . fadeout()也可以使用。


你可以把td的内容包装在一个div中,并在上面使用滑动。您需要决定动画是否值得额外的标记。

您可以尝试将行内容包装在<span>中,并让您的选择器为$('#detailed_edit_row span');-有点粗糙,但我刚刚测试过,它是有效的。我还尝试了上面的表行建议,但它似乎不起作用。

更新:我一直在研究这个问题,从所有迹象来看,jQuery需要它执行slideDown的对象是一个块元素。所以,不可能。我能够变出一个表,我在一个单元格上使用滑下来,它不影响布局,所以我不确定你是如何设置的。我认为你唯一的解决方案是重构表,以这样一种方式,即单元格是一个块,或者只是.show();该死的东西。祝你好运。

我确实使用了这里提供的想法,但遇到了一些问题。我把它们都修好了,并有一个流畅的单句话,我想分享。

$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});

它在td元素上使用css。它将高度降低到0px。这样,只有在每个td元素中新创建的div-包装器的内容的高度才重要。

幻灯片开慢了。如果你让它更慢,你可能会发现一些故障。一开始的小跳跃。这是因为前面提到的css设置。但是如果没有这些设置,行高度不会降低。只有它的内容会。

最后tr元素被移除。

整行只包含JQuery,没有原生Javascript。

希望能有所帮助。

下面是一个示例代码:

    <html>
            <head>
                    <script src="https://code.jquery.com/jquery-3.2.0.min.js">               </script>
            </head>
            <body>
                    <table>
                            <thead>
                                    <tr>
                                            <th>header_column 1</th>
                                            <th>header column 2</th>
                                    </tr>
                            </thead>
                            <tbody>
                                    <tr id="row1"><td>row 1 left</td><td>row 1 right</td></tr>
                                    <tr id="row2"><td>row 2 left</td><td>row 2 right</td></tr>
                                    <tr id="row3"><td>row 3 left</td><td>row 3 right</td></tr>
                                    <tr id="row4"><td>row 4 left</td><td>row 4 right</td></tr>
                            </tbody>
                    </table>
                    <script>
    setTimeout(function() {
    $('#row2').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow',         function() {$(this).parent().parent().remove();});
    }, 2000);
                    </script>
            </body>
    </html>

快速、简单的解决办法:

使用JQuery .toggle()显示/隐藏行点击或锚。

需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。