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

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

有什么解决办法吗?

代码如下:

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

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

当前回答

我想滑动整个身体，我已经通过结合褪色和滑动效果来管理这个问题。

我已经完成了3个阶段(第2步和第3步被替换，以防你想向下或向上滑动)

给身体指定高度，褪色所有td和th， tbody下滑。

slideUp的例子:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});

2012-08-20 11:30:00

其他回答

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

我通过使用行中的td元素来解决这个问题:

$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);

动画行本身会导致奇怪的行为，主要是异步动画问题。

对于上面的代码，我突出显示了在表中拖放的一行，以突出显示更新已经成功。希望这能帮助到一些人。

2012-03-28 13:08:23

快速、简单的解决办法:

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

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

2017-11-22 19:11:20

像这样选择行内容:

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

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

2015-06-09 20:17:44

这段代码有效!

<!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

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

推荐文章

最新文章

标签