web-dev-qa-db-ja.com

テーブル行でslideDown（またはshow）関数を使用する方法は？

テーブルに行を追加して、その行をスライドさせて表示しようとしていますが、スライドダウン機能はdisplay：blockスタイルをテーブル行に追加してレイアウトを台無しにしているようです。

これを回避する方法はありますか？

コードは次のとおりです。

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

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);
jqueryanimationhtml-tableslidedown
212
Greg

テーブル行ではアニメーションはサポートされていません。

ChafferとSwedbergによる「Learning jQuery」から

ブラウザは表示プロパティに異なる値（テーブル行とブロック）を使用するため、テーブル行はアニメーションに特定の障害をもたらします。 .hide（）および.show（）メソッドは、アニメーションなしで、テーブル行で常に安全に使用できます。 jQueryバージョン1.1.3以降、.fadeIn（）および.fadeOut（）も使用できます。

Divでtdの内容をラップし、その上でslideDownを使用できます。アニメーションが追加のマークアップに値するかどうかを判断する必要があります。

292
Emily

Trを動的にラップし、slideUp/slideDownが完了したら削除します。 1つまたはいくつかのタグを追加および削除し、アニメーションが完了したらそれらを削除するオーバーヘッドは非常に小さく、目に見える遅れはまったくありません。

スライドアップ：

$('#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に敬意を表さなければなりません。彼のプラグインを取り、上記に戻しました。

156
wiks

私がこのために作成したプラグインは、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

これが誰かを助けることを願っています。

40
Vinny

次のように行の内容を選択します。

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

。contents（） -テキストおよびコメントノードを含む、一致した要素のセット内の各要素の子を取得します。

4
jaywiz

行の内容を<span>でラップし、セレクターを$('#detailed_edit_row span');にすることもできます-少しハックですが、私はそれをテストしただけで動作します。上記のtable-rowの提案も試しましたが、うまくいかないようでした。

更新：私はこの問題をいじくり回してきましたが、jQueryはすべての指示から、slideDownを実行するオブジェクトがブロック要素であるために必要です。だから、サイコロはありません。セルでslideDownを使用したテーブルを思い付くことができましたが、レイアウトにまったく影響しなかったため、どのように設定されているかわかりません。あなたの唯一の解決策は、そのセルがブロックであっても大丈夫な方法でテーブルをリファクタリングすること、または単に.show();であると思います。がんばろう。

4
Paolo Bergantino

私はこれに答えるのに少し遅れていますが、それを行う方法を見つけました:)

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
user283154

行のクリックでスライドして表示および非表示になる非表示の行を含むテーブルを作成しました。

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

ここで提供されたアイデアを使用し、いくつかの問題に直面しました。それらをすべて修正し、共有したいスムーズなワンライナーを用意しました。

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

行のtd要素を使用してこれを回避しました：

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

行自体をアニメーション化すると、奇妙な動作が発生します。ほとんどが非同期アニメーションの問題です。

上記のコードでは、テーブル内でドラッグアンドドロップされる行を強調表示して、更新が成功したことを強調表示しています。これが誰かを助けることを願っています。

2
Johann

このコミュニティの初心者です。私の答えを評価してください。 :)

これは正常に動作することがわかります。

私はテーブルを持っています（<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();});

2番目のパラメーター（関数）はコールバックです。

シンプル!!

2
Stalin Gino

#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);
1
Mark Ball

私は提供された他のすべてのソリューションに問題がありましたが、結局はバターのように滑らかなこの簡単なことをしました。

次のように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";   
  } 
}

基本的に、「見えない」行を0ピクセルの高さにし、内部にdivを作成します。
divでは行ではなくアニメーションを使用し、行の高さを1pxに設定します。

行を再び非表示にするには、divで反対のアニメーションを使用し、行の高さを0pxに戻します。

1
Vincent

ボディ全体をスライドさせたいので、フェードとスライドの効果を組み合わせてこの問題を管理しました。

これを3段階で実行しました（下または上にスライドする場合は、2番目と3番目のステップが置き換えられます）

  1. Tbodyに高さを割り当て、
  2. すべてのtdとthをフェードし、
  3. スライディングtbody。

SlideUpの例：

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

私は、Vinnyが作成して使用しているプラ​​グインが気に入っています。ただし、スライドする行（tr/td）内のテーブルの場合、ネストしたテーブルの行は、上にスライドした後でも常に非表示になります。そのため、ネストされたテーブルの行を非表示にしないように、プラグインをすばやく簡単にハックしました。次の行を変更するだけです

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

に

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

ネストされたものではなく、即時のtdsのみを検索します。これがプラグインを使用し、テーブルをネストしている人を助けることを願っています。

1
rajug

クイック/簡単な修正：

JQuery 。toggle（） を使用して、行またはアンカーのいずれかの行のonclickを表示/非表示します。

非表示にする行を識別する関数を作成する必要がありますが、トグルは探している機能を作成します。

0
Daniel Adams
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
Zernel

このコードは機能します！

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

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

}）;

0
Bear Bear

行の高さのアニメーション化を開始すると同時に、行の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
Morten Holmgaard

テーブルの行を同時にスライドおよびフェードする必要がある場合は、これらを使用してみてください。

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
Andrew

Vinnyが提供するプラグはreally closeですが、いくつかの小さな問題を見つけて修正しました。

  1. 非表示にされる行の子だけでなく、td要素を貪欲にターゲットにしました。行を表示するときにそれらの子を探し出せば、これは大丈夫だっただろう。それが近づいている間、それらはすべて「display：none」で終わり、それらを非表示にしました。
  2. 子のth要素をまったくターゲットにしませんでした。

  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);
0
OregonJeff