jquery - テーブル行でslideDown (またはshow)関数を使用するには?

Question

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

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

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

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

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

Answer 1

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

Chaffer と Swedberg による「Learning jQuery」より

---

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

---

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

Answer 2

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

スライドアップ:

$('#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 に敬意を表して、彼のプラグインを取り出して上記に戻しました。

Answer 3

ここに私が書いたプラグインがあります.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

これが誰かに役立つことを願っています。

Answer 4

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

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

Answer 5

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

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

.contents() - テキスト ノードとコメント ノードを含む、一致した要素のセット内の各要素の子を取得します。

Answer 6

ネストされたテーブルを持つテーブル行があります。

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

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

---

単純！！

スライドアップ/ダウン機能のパラメーターとして追加できるオプションもいくつかあることに注意してください（最も一般的なのは'slow'との継続時間です'fast'）。

Answer 7

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

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

テーブル データ タグ内に div 要素を配置するだけです。表示に設定すると、div が展開されると、行全体が表示されます。次に、テーブル行を再び非表示にする前に、フェードバックするように指示します（その後、タイムアウトして効果が表示されます:)

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

Answer 8

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

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

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

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

Answer 9

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

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

に

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

ネストされたものではなく、即時のtdのみを見つけます。これが、プラグインを使用していて、ネストされたテーブルを持っている人に役立つことを願っています。

Answer 10

体全体をスライドさせたいのですが、フェード効果とスライド効果を組み合わせることでこの問題を解決しました。

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

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

スライドアップの例:

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

Answer 11

表の行を同時にスライドさせてフェードさせる必要がある場合は、これらを使用してみてください。

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

Answer 12

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

});