如何在表格行上使用slideDown(或显示)功能?


214

我正在尝试向表中添加一行,并使该行滑入视图,但是slidedown函数似乎正在向表行添加display:block样式,这会弄乱布局。

任何想法如何解决这个问题?

这是代码:

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

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

它一定是桌子吗?我想不用桌子就容易多了。
MrChrister

fadeInfadeOut处理表格行,并产生不错的替代视觉效果(仅在Firefox上测试)
Savage

Answers:


295

表格行不支持动画。

选自Chaffer和Swedberg的“学习jQuery”


表格行为动画设置了特殊的障碍,因为浏览器为其可见显示属性使用不同的值(表格行和块)。不带动画的.hide()和.show()方法始终可以安全地用于表行。从jQuery 1.1.3版本开始,也可以使用.fadeIn()和.fadeOut()。


您可以将td内容包装在div中,并在其上使用slideDown。您需要确定动画是否值得额外的标记。


5
很棒!还有一个小陷阱:如果有的话,还必须对单元格填充进行动画处理。但这也没什么大不了的。
阿德里安·格里戈里

11
您可以像这样对填充进行动画处理:$('tr').find('td').animate({padding: '0px'}, {duration: 200});
Andrew

@Emily:能否请您指向jQuery源代码的特定行?我很想破解我的项目的源代码。
Randomblue 2011年

7
这不是一个直接的答案,但是我发现在大多数情况下使用fadeIn / fadeOut几乎一样好,并且在表行上似乎还可以。
Phil LaNasa 2014年

@PhilLaNasa起初,我就像“不,看起来不太好”,但后来我尝试了一下,看起来真的很好!感谢您的旅行!
Kenton de Jong

157

我只是动态地包装tr,然后在slideUp / slideDown完成后将其删除。添加和删​​除一个或几个标签,然后在动画完成后再删除它们,这是一个很小的开销,我看不到这样做有任何明显的滞后。

幻灯片

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

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

 });

滑下:

$('#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致敬,干杯。


谢谢!这样对我有用:row.find('td')。wrapInner('<div style =“ display:none;” />').parent().prependTo('#MainTable> tbody')。find(' td> div')。slideDown('slow',function(){var $ set = $(this); $ set.replaceWith($ set.contents());});
pauloya 2011年

唯一的问题是电池之间有轻微的延迟。
Archimedes Trajano 2015年

41

这是我为此编写的一个插件,它从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);

基本用法:

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

希望这对某人有帮助。


如果我要添加/删除一组行怎么办?我需要给主/明细功能
Volatil3

回调函数立即为我触发。
贾斯汀2012年

那只是炫耀。尽管效果不错(尽管尚未测试回调功能)。有一天,我将了解足够的jQuery,以便能够对其进行反向工程。
cartbeforehorse 2012年

1
仅供参考:如果目标行的内容是另一个表,这似乎会中断。我没有时间做进一步的工作,但是我发现它折叠了子表,将所有行设置为隐藏,添加了一些奇怪的填充,然后一旦调用了slideRow就不会重新展开这些行('下')。
克里斯·波特

1
我遇到了与其他问题相同的问题,其中子表在调用slideRow('up')然后调用slideRow('down')时表现得很滑稽。我发现这是因为在插件中两次使用了find('td')方法。我将其更改为儿童('td'),问题立即消失了。对于th单元的问题,只需将child('td')的两个实例都更新为child('td,th')。
俄勒冈杰夫(OregonJeff)

4

您可以尝试将行中的内容包装到中,并使<span>选择器成为$('#detailed_edit_row span');-有点黑,但是我刚刚对其进行了测试,并且它可以工作。我也尝试了table-row上面的建议,但似乎没有用。

更新:我一直在解决这个问题,从种种迹象来看,jQuery需要它执行slideDown的对象成为一个块元素。所以,没有骰子。我能够想到一个在单元格上使用了slideDown的表,它根本不影响布局,因此我不确定如何设置您的表。我认为您唯一的解决方案是以某种方式重构表,以使该单元格成为块,或者只是.show();该死的东西。祝好运。


1
您无法设置tr和td标签的动画。您必须用div包装每个td的内容,然后为div设置动画,然后隐藏/显示tr:<td><div style="display:block">contents</div></td>
Andrew

4

选择行的内容,如下所示:

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

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


您还必须选择该列,例如$('tr > td').contents().slideDown()。确保列内的所有内容都包装在标签中,即<td>Some text</td>无法使用。这是最简单的解决方案。
user2233706

3

我在回答这个问题上落后于时代,但我找到了一种解决方法:)

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的扩展,整个行都会下降。然后告诉它逐渐消失(然后超时,以便您看到效果),然后再次隐藏表格行:)

希望这对某人有帮助!


3

我使用一张包含隐藏行的表对行进行了单击,这些行可以在视图中滑入和滑出。


3

有一个带有嵌套表的表行:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

向下滑动行:

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

注意:该行及其内容(此处为"table")都应在动画开始前隐藏


向上滑动行:

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

第二个参数(function())是回调。


简单!!

请注意,还可以添加几个选项作为上/下滑动功能的参数(最常见的是'slow'和的持续时间'fast')。


您实际上是将内容放在行之间,还是错字?
文森特

2

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

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

对行本身进行动画处理会导致奇怪的行为,主要是异步动画问题。

对于上面的代码,我突出显示了在表中被拖放的一行,以突出显示更新已成功。希望这对某人有帮助。


我要effect is not a function
野人

2

我确实使用了此处提供的想法,但遇到了一些问题。我修复了所有这些问题,并且希望分享一个流畅的消息。

$('#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-wrapper内容的高度才重要。

slideUp运行缓慢。如果您将其设置得更慢,则可能会发现一些故障。一开始有一个小小的跳跃。这是因为提到的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 3.2.0版。今天,我已经使用Chrome 73.0.3683.75测试了代码,并且可以正常工作。
暗风

1

我想滑动整个身体,并且通过组合淡入淡出和滑动效果来解决了这个问题。

我已分3个阶段进行了此操作(如果您要上下滑动,请替换第2和第3步)

  1. 为躯干分配高度,
  2. 淡出所有td和th
  3. 滑体。

slideUp的示例:

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

这不仅会影响整个表格,而不会影响整个表格吗?
Savage

1

我在提供的所有其他解决方案上都遇到了问题,但最终做了一件像黄油一样光滑的简单事情。

像这样设置HTML:

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

然后像这样设置您的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";   
  } 
}

基本上,将“不可见”行设置为0px高,并在其中添加div。
使用div(而非行)上的动画,然后将行高设置为1px。

要再次隐藏该行,请在div上使用相反的动画,并将行高设置回0px。


1

我喜欢Vinny编写并一直使用的插件。但是对于表格在滑动行(tr / td)内的情况,即使向上滑动,嵌套表的行也始终被隐藏。因此,我在插件中进行了快速简单的修改,以免隐藏嵌套表的行。只需更改以下行

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

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

仅查找立即tds,而不查找嵌套tds。希望这对使用插件并嵌套表格的人有所帮助。


1

我想在#Vinny的帖子中添加评论,但没有代表,所以必须发布答案...

在您的插件中发现了一个错误-当您仅通过参数传递对象时,如果没有传递其他参数,它们就会被覆盖。通过更改参数的处理顺序即可轻松解决,请参见下面的代码。我还添加了一个关闭后销毁行的选项(仅当我需要它时!):$('#row_id')。slideRow('up',true); //破坏该行

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

忘了提,我还添加在孩子们与日修正
三分球

0

如果您需要同时滑动和淡化表格行,请尝试使用以下方法:

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

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

您可以使用以下方法:

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

0

如果您将行中的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;
    }
}

0

此代码有效!

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

0

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

});


这将显示并隐藏包含表的div。不是OP要求的表格行。
shazbot

0

Vinny提供的插件确实很接近,但是我发现并修复了一些小问题。

  1. 它贪婪地将td元素作为目标,而不仅仅是隐藏的行的子元素。如果在显示该行时又找到了那些孩子,那将是可以的。当它接近时,它们都以“ display:none”结尾,从而使其隐藏。
  2. 它根本没有针对子元素。
  3. 对于具有大量内容的表单元格(例如具有许多行的嵌套表),调用slideRow('up'),无论提供的slideSpeed值如何,填充动画完成后都会折叠该行的视图。我对其进行了修复,以使填充动画直到包装上的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);

@circuitry,您有什么特别要说的吗?还是您的批评足够?
俄勒冈杰夫'17

@Oregoneff说实话。我正在寻找更简单的东西。滑动表格行不需要109行代码。
电路

@circuitry,如果您希望能够用作插件(而不只是从事针对特定用途的代码的不良做法),并且能够控制速度,简化操作并在可自定义项上进行回调,那么它并不会变得简单基础。因为这是您要包含在代码库中的东西,并且可以用于需要扩展/折叠表行的任何实现,所以我不确定为什么这很重要,因为它是109行代码。
俄勒冈杰夫

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.