如何在表行上使用slideDown(或show)函数?

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.

我正在尝试向一个表中添加一行，并让该行进入视图，但是slidedown函数似乎添加了一个显示:块样式到表行，这会打乱布局。

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);
  }
);

21 个解决方案

#1

Animations are not supported on table rows.

在表行中不支持动画。

From "Learning jQuery" by Chaffer and Swedberg

Chaffer和Swedberg的《学习jQuery》。

---

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

表行为动画设置了特殊的障碍，因为浏览器使用不同的值(表行和块)来显示其可见的显示属性。隐藏()和.show()方法，没有动画，使用表行总是安全的。在jQuery版本1.1.3中，. fadein()和. fadeout()也可以使用。

---

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.

您可以将td内容打包在一个div中，并使用它的幻灯片。您需要决定动画是否值得额外的标记。

#2

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.

我只是将tr动态地打包，然后在slideUp/slideDown完成后删除它。它是一个非常小的开销，添加和删除一个或几个标记，然后在动画完成后删除它们，我没有看到任何明显的延迟。

SlideUp:

SlideUp:

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

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());

 });

I have to pay tribute to fletchzone.com as I took his plugin and stripped it back to the above, cheers mate.

我不得不向fletchzone.com致敬，因为我拿走了他的插件，并把它重新放回了上面。

#3

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).

这是我为它编写的一个插件，它从Fletch的实现中得到了一点，但是我的仅仅是用来滑动一行上或下(没有插入行)。

(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);

Basic Usage:

基本用法:

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

Pass slide options as individual arguments:

将幻灯片选项作为单独的参数:

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

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:

基本上，对于向下滑动的动画，插件将单元格的内容封装在div中，将它们进行动画处理，然后删除它们，反之亦然(通过一些额外的步骤来删除单元格填充)。它还会返回你所调用的对象，所以你可以像这样连锁方法:

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

Hope this helps someone.

希望这可以帮助别人。

#4

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 the table-row suggestion above and it didn't seem to work.

您可以尝试在中封装行的内容，并让选择器为$('#detailed_edit_row span');-有点乱，但我只是测试了一下，它确实有效。我也试过上面的表格，但似乎没有效果。

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.

更新:我一直在处理这个问题，从所有的迹象来看，jQuery都需要它执行滑块的对象作为块元素。所以,不行。我能够想象出一个表格，我在一个单元格上使用了slideDown，它完全没有影响到布局，所以我不确定你的设置是如何设置的。我认为你唯一的解决办法是用这样一种方式重构这个表格，让它可以作为一个块，或者只是。show();该死的东西。祝你好运。

#5

I'm a bit behind the times on answering this, but I found a way to do it :)

我在回答这个问题上有点落后，但我找到了一种方法:)

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);
    }
}

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 :)

我只是在表数据标签中添加了一个div元素。当它被设置为可见时，当div展开时，整个行就会下降。然后在隐藏表格行之前，让它重新显示(然后超时，以便看到效果):)

Hope this helps someone!

希望这可以帮助别人!

#6

Select the contents of the row like this:

选择如下行的内容:

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

.contents() - Get the children of each element in the set of matched elements, including text and comment nodes.

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

#7

Im a newbie to this community. Pl rate my answer. :)

我是这个社区的新手。Pl率我的答案。:)

You can find this one works fine.

你会发现这个很好用。

Im having a table(<table style='display: none;'></table>)

我有一个表(

)

inside the <tr class='dummyRow' style='display: none;'><td></td></tr> content.

内容。

To slide down the row..

沿着这一行滑下去。

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

Note: row and the content inside row (here it is table) both should be hidden before animation starts.

注意:行和行内的内容(这里是表)都应该隐藏在动画开始之前。

To slide up the row..

把这一行滑上去。

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

second parameter(function) is a callback.

第二个参数(函数)是一个回调函数。

Simple!!

简单! !

#8

I've gotten around this by using the td elements in the row:

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

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

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.

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

#9

I want to slide whole tbody and I've managed this problem by combining fade and slide effects.

我想把整个tbody都滑下来，我已经通过将淡出效果和幻灯片效果结合在一起来解决这个问题。

I've done this in 3 stages (2nd and 3rd steps are replaced in case you want to slide down or up)

我已经做了3个阶段(第2步和第3步被替换了如果你想滑下或向上)

1. Assigning height to tbody,
2. tbody分配高度,
3. Fading all td and th,
4. 消逝所有的td和th，
5. Sliding tbody.
6. tbody下滑。

Example of slideUp:

slideUp的例子:

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

#10

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:

像这样设置HTML:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

Then set up your javascript like so:

然后像这样设置javascript:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

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.

基本上，将“看不见”的行设置为0px高，里面有一个div。使用div(不是行)上的动画，然后将行高度设置为1px。

To hide the row again, use the opposite animation on the div and set the row height back to 0px.

为了再次隐藏行，在div中使用相反的动画，并将行高度设置为0px。

#11

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

我喜欢文尼写的那个插件。但在滑动行(tr/td)内的表中，嵌套表的行即使在滑出后仍然隐藏。所以我在插件中做了一个快速简单的hack，而不是隐藏嵌套表的行。只需更改以下行。

var $cells = $(this).find('td');

to

来

var $cells = $(this).find('> td');

which finds only immediate tds not nested ones. Hope this helps someone using the plugin and have nested tables.

它只发现直接tds，而不是嵌套的tds。希望这能帮助使用插件的人，并拥有嵌套的表。

#12

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.

我确实使用了这里提供的想法，并面临一些问题。我把它们都修理好了，我想要和大家分享一个流畅的单行。

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

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.

它在td元素上使用css。它把高度降低到0px。这样，在每个td元素的内部，新创建的div包装的内容的高度就很重要了。

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.

这个滑道是开着的。如果你让它变得更慢，你可能会发现一些故障。一开始的小跳跃。这是因为所提到的css设置。但是没有这些设置，行就不会减少。只有它的内容。

At the end the tr element gets removed.

在最后，tr元素被删除。

The whole line only contains JQuery and no native Javascript.

整个行只包含JQuery和没有本地Javascript。

Hope it helps.

希望它可以帮助。

#13

I neded a table with hidden rows that slide in and out of view on row click.

我在一个表格中嵌入了一个隐藏的行，它可以在行点击的视图中滑动。

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

#14

If you need to slide and fade a table row at the same time, try using these:

如果您需要同时滑动和删除表行，请尝试使用以下方法:

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } else {
        $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
            $tr.hide();
            callback();
        });
    }
    return $tr;
};

$(document).ready(function(){
    $('tr.special').hide().prepareTableRowForSliding();
    $('a.toggle').toggle(function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Hide table row');
        });
    }, function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Display table row');
        });
});
});

#15

function hideTr(tr) {
  tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
    tr.hide();
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

function showTr(tr) {
  tr.show()
  tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

you can use these methods like:

你可以使用以下方法:

jQuery("[data-toggle-tr-trigger]").click(function() {
  var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
  if($tr.is(':hidden')) {
    showTr($tr);
  } else {
    hideTr($tr);
  }
});

#16

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

如果你设置了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;
    }
}

#17

This code works!

这段代码工作!

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

#18

http://jsfiddle.net/PvwfK/136/

http://jsfiddle.net/PvwfK/136/

<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
    <td style='cursor:pointer; width:20%; text-align:left;' id='header'>
        <label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>

        </label>
    </td>
</tr>
<tr>
    <td style='widtd:20%; text-align:left;'>
        <div id='content' class='content01'>
            <table cellspacing='0' cellpadding='0' id='form_table'>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

$(function () {
$(".table01 td").on("click", function () {
    var $rows = $('.content01');
    if ($(".content01:first").is(":hidden")) {
        $("#header01").text("▲ Customer Details");
        $(".content01:first").slideDown();
    } else {
        $("#header01").text("▼ Customer Details");
        $(".content01:first").slideUp();
    }
});

});

});

#19

The plug offered by Vinny is really close, but I found and fixed a couple of small issues.

Vinny提供的插头非常接近，但我发现并修复了几个小问题。

1. It greedily targeted td elements beyond just the children of the row being hidden. This would have been kind of ok if it had then sought out those children when showing the row. While it got close, they all ended up with "display: none" on them, rendering them hidden.
2. 它贪婪地针对td元素，而不仅仅是隐藏的行中的子元素。如果它能在显示这一行的时候找到那些孩子的话，这是可以的。当它接近时，它们都以“显示:none”的形式出现，将它们隐藏起来。
3. It didn't target child th elements at all.
4. 它根本没有针对儿童元素。

5. 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.

   对于包含大量内容的表单元(如嵌有许多行的嵌套表)，调用slideRow('up')，不管提供的幻灯片值如何，只要填充动画完成，它就会立即折叠行视图。我修改了它，这样填充动画就不会触发，直到包装上的slideUp()方法完成。

   (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).children('td, th');
                   $cells.wrapInner('<div class="slideRowUp" />');
                   var currentPadding = $cells.css('padding');
                   $cellContentWrappers = $(this).find('.slideRowUp');
                   $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
                       $(this).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).children('td, th');
                   $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);
   

#20

I'd like to add a comment to #Vinny's post but dont have the rep so have to post an answer...

我想给#Vinny的帖子添加一个评论，但是没有这个代表，所以必须发布一个答案……

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

在你的插件中发现了一个错误——当你把一个对象传入时，如果没有其他参数被传入，它们会被覆盖。通过修改参数的顺序可以轻松地解决这个问题，下面是代码。我还添加了一个选项，用于在关闭后销毁该行(仅当我需要它的时候!):$('#row_id')。slideRow(“向上”,真正的);/ /破坏行

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

                var $row = $(this);
                var $cells = $row.children('th, 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 (sR.thisCallArgs.destroyAfterUp)
                        {
                            $row.replaceWith('');
                        }
                        if (typeof sR.thisCallArgs.callback == 'function') {
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            },
            down: function (arg1, arg2, arg3) {

                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;
                }
                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;
                }

                var $cells = $(this).children('th, 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);

#21

Quick/Easy Fix:

快速、简单的解决办法:

Use JQuery .toggle() to show/hide the rows onclick of either Row or an Anchor.

使用JQuery .toggle()来显示/隐藏单击任意行或锚的行。

A function will need to be written to identify the rows you would like hidden, but toggle creates the functionality you are looking for.

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