如何使用slideDown(或显示的)功能上的一个表行吗？

Question

我想添加一行为表和具有这滑行进图，但slidedown功能似乎是加入一种显示方式表行其混乱的布局。

任何想法，如何解决这个吗？

这里的代码:

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

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

Answer 1

不支持动画上表中的行。

从 “学习jQuery的” 通过包布和斯威德伯格

---

  

表的行呈现特定   障碍动画，因为浏览器   使用不同的值（表的行和   块），用于它们的可见显示   属性。所述.hide（）和.show（）   方法，没有动画，总是   安全与表行使用。作为   jQuery的1.1.3版本，.fadeIn（）和   .fadeOut（）可以使用。

---

您可以在一个div包住TD的内容，并使用了slideDown上。你需要决定是否动画是值得额外的标记。

Answer 2

我简单地包住TR动态然后取出它，一旦效果基本show /了slideDown具有完整。这是一个非常小的开销添加和删除一个或一对夫妇的标签，然后删除它们一旦动画完成，我没有看到任何明显的滞后都这样做。

<强>效果基本show ：

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){

  $(this).parent().parent().remove();

 });

<强>了slideDown：

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){

  var $set = $(this);
  $set.replaceWith($set.contents());

 });

我要赞扬fletchzone.com因为我把他的插件，并剥夺其返回到上面，欢呼队友。

Answer 3

下面是一个插件，我写了这一点，它需要一点点从陈伟伟的实现，但我仅用来向上或向下（无插入行）。

滑动一行

(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

<强>基本用法：

$('#row_id').slideRow('down');
$('#row_id').slideRow('up');

<强>通行证滑动选项作为单独的参数：

$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object

基本上，对于滑下动画，插件包装在的DIV的单元格的内容，动画那些，然后删除它们，并为向上滑动（与一些额外的步骤，反之亦然摆脱单元格填充的）。它也返回你把它称为上的对象，因此可以链的方法，如下所示：

$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red

希望这可以帮助别人。

Answer 4

您可以尝试包裹行的内容在<span>并让您的选择可以$('#detailed_edit_row span'); - 一个有点hackish，但我只是测试它和它的作品。我也试过table-row建议上面，它似乎并没有工作。

<强>更新：我被这个问题玩弄，并从所有的适应症的jQuery需要它执行了slideDown上是一个块元件的对象。所以，没有骰子。我能变出一个表，其中我用一个细胞了slideDown，并没有影响到布局可言，所以我不知道你们是如何设置的。我认为你唯一的解决办法就是重构表，它是确定与该小区是一个块，或者只是.show();该死的东西这样一种方式。好运。

Answer 5

选择这样的行的内容：

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

.contents（） - 得到每个元素的子元素中匹配的元素，包括文本和注释节点的

Answer 6

我在回答这个有点落伍了，但我找到了一种方法来做到这一点：）

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

我只把一个div元素表数据标记内。当它设置可见，为扩大DIV，整排下来。 然后告诉它再次隐藏表行之前（让你看到的效果，然后超时）褪色备份：）

希望这可以帮助别人！

Answer 7

IM新手到该社区。 PL率我的答案。 ：）

您可以找到这个工作得很好。

具有表（<table style='display: none;'></table>）林

的

<tr class='dummyRow' style='display: none;'><td></td></tr>内容里面。

要滑下行..

$('.dummyRow').show().find("table").slideDown();

注意：行和内部行内容（这里是table）两者都应该动画开始之前被隐藏

。

要向上滑动行..

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

第二个参数（功能）是一个回调。

简单!!

Answer 8

我已经通过使用td元素的行中解决此得到：

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

动画的行本身引起奇怪的行为，主要是异步的动画的问题。

对于上面的代码中，我强调指出，被拖动并在表中投下约强调指出，更新成功的行。希望这可以帮助别人。

Answer 9

我neded一个表与和缩小的视图上行点击滑动隐藏的行。

$('.tr-show-sub').click(function(e) {  
    var elOne = $(this);
    $('.tr-show-sub').each(function(key, value) {
        var elTwoe = $(this);
        
        if(elOne.get(0) !== elTwoe.get(0)) {
            if($(this).next('.tr-sub').hasClass('tr-sub-shown')) {
                elTwoe.next('.tr-sub').removeClass('tr-sub-shown');
                elTwoe.next('tr').find('td').find('div').slideUp();
                elTwoe.next('tr').find('td').slideUp();
            }
        }
        
        if(elOne.get(0) === elTwoe.get(0)) {
            if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) {
                elOne.next('.tr-sub').removeClass('tr-sub-shown');
                elOne.next('tr').find('td').find('div').slideUp();
                elOne.next('tr').find('td').slideUp();
            } else {
                elOne.next('.tr-sub').addClass('tr-sub-shown');
                elOne.next('tr').find('td').slideDown();
                elOne.next('tr').find('td').find('div').slideDown();
            }
        }
    })
});

body {
        background: #eee;
    }
    
    .wrapper {
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 10%;
    }
    
    table {
        background: white;
        width: 100%;
    }
    
    table th {
        background: gray;
        text-align: left;
    }
    
    table th, td {
        border-bottom: 1px solid lightgray;
        padding: 5px;
    }
    
    table .tr-show-sub {
        background: #EAEAEA;
        cursor: pointer;
    }

    table .tr-sub td {
        display: none;
    }
    
    table .tr-sub td .div-sub {
        display: none;
    }

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="wrapper">
    <table cellspacing="0" cellpadding="3">
        <thead>
            <tr class="table">
                <th>col 1</th>
                <th>col 2</th>
                <th>col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
        </tbody>
    </table>
</div>