如何使用滑动(或显示)函数在一个表行?

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

有什么解决办法吗?

代码如下:

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

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

当前回答

这段代码有效!

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
        <script>
            function addRow() {
                $('.displaynone').show();
                $('.displaynone td')
                .wrapInner('<div class="innerDiv" style="height:0" />');
                $('div').animate({"height":"20px"});
            }
        </script>
        <style>
            .mycolumn{border: 1px solid black;}
            .displaynone{display: none;}
        </style>
    </head>
    <body>
        <table align="center" width="50%">
            <tr>
                <td class="mycolumn">Row 1</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 2</td>
            </tr>
            <tr class="displaynone">
                <td class="mycolumn">Row 3</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 4</td>
            </tr>
        </table>
        <br>
        <button onclick="addRow();">add</button>    
    </body>
</html>

2014-12-06 20:40:43

其他回答

在表行上不支持动画。

来自Chaffer和Swedberg的“学习jQuery”

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

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

2009-05-28 11:49:53

像这样选择行内容:

$(row).contents().slideDown();

.contents () - 获取匹配元素集中每个元素的子元素，包括文本节点和注释节点。

2015-06-09 20:17:44

如果你把行中的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;
    }
}

2014-10-10 09:45:57

快速、简单的解决办法:

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

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

2017-11-22 19:11:20

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

$('#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>

2017-03-21 23:24:14

如何使用滑动(或显示)函数在一个表行?

推荐文章

最新文章

标签