Bagaimana cara Menggunakan fungsi slideDown (atau show) pada baris tabel?

214

Saya mencoba untuk menambahkan baris ke tabel dan membuat slide baris ke tampilan, namun fungsi slidesown tampaknya akan menambahkan tampilan: gaya blok ke baris tabel yang mengacaukan tata letak.

Ada ide bagaimana mengatasi ini?

Ini kodenya:

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

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

jquery animation html-table slidedown Greg
sumber

Apakah harus berupa meja? Jauh lebih mudah tanpa meja saya pikir.

Tn. Christer

fadeIndan fadeOutbekerja pada baris tabel dan membuat efek visual alternatif yang bagus (hanya diuji pada Firefox)

Savage

295

Animasi tidak didukung di baris tabel.

Dari "Learning jQuery" oleh Chaffer dan Swedberg

Baris tabel menyajikan hambatan khusus untuk animasi, karena browser menggunakan nilai yang berbeda (baris-tabel dan blok) untuk properti tampilan yang terlihat. Metode .hide () dan .show (), tanpa animasi, selalu aman digunakan dengan baris tabel. Pada jQuery versi 1.1.3, .fadeIn () dan .fadeOut () juga dapat digunakan.

Anda dapat membungkus konten td Anda dalam div dan menggunakan slideDown itu. Anda perlu memutuskan apakah animasi tersebut layak dengan markup tambahan.

Emily
sumber

5

Bagus sekali! Ada gotcha kecil lainnya: Anda juga harus menghidupkan sel jika ada. Tapi itu juga bukan masalah besar.

Adrian Grigore

11

Anda dapat menghidupkan padding seperti ini:$('tr').find('td').animate({padding: '0px'}, {duration: 200});

Andrew

@ Emily: Bisakah Anda mengarahkan ke jalur tertentu dari sumber jQuery? Saya tergoda untuk meretas sumber untuk proyek saya.

Randomblue

7

Bukan jawaban langsung, tetapi saya telah menemukan bahwa menggunakan fadeIn / fadeOut hampir sama baiknya dalam sebagian besar situasi dan tampaknya berfungsi dengan baik pada baris tabel.

Phil LaNasa

@ PhilLaNasa Awalnya saya seperti "Tidak, itu tidak akan terlihat bagus" tapi kemudian saya mencobanya dan itu terlihat sangat bagus! Terima kasih untuk perjalanannya!

Kenton de Jong

157

Saya cukup membungkus tr secara dinamis kemudian menghapusnya setelah slideUp / slideDown telah selesai. Ini adalah overhead yang cukup kecil menambahkan dan menghapus satu atau beberapa tag dan kemudian menghapusnya setelah animasi selesai, saya tidak melihat kelambatan yang terlihat sama sekali melakukannya.

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

 });

Meluncur ke bawah:

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

 });

Saya harus membayar upeti ke fletchzone.com ketika saya mengambil plugin-nya dan mengembalikannya ke atas, teman yang bersorak.

wiks
sumber

Terima kasih! Entah bagaimana ini bekerja untuk saya: row.find ('td'). WrapInner ('<div style = "display: none;" />').parent().prependTo('#MainTable> tbody'). Find (' td> div '). slideDown (' lambat ', function () {var $ set = $ (ini); $ set.replaceWith ($ set.contents ());});

pauloya

Satu-satunya masalah adalah ada sedikit keterlambatan antar sel.

Archimedes Trajano

41

Berikut plug-in yang saya tulis untuk ini, dibutuhkan sedikit dari implementasi Fletch, tetapi milik saya hanya digunakan untuk menggeser baris ke atas atau ke bawah (tidak ada baris yang disisipkan).

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

Penggunaan Dasar:

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

Lewati opsi slide sebagai argumen individual:

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

Pada dasarnya, untuk animasi slide down, plug-in membungkus isi sel dalam DIVs, menghidupkannya, kemudian menghapusnya, dan sebaliknya untuk slide ke atas (dengan beberapa langkah tambahan untuk menyingkirkan sel pengisi). Ini juga mengembalikan objek yang Anda panggil, sehingga Anda dapat membuat metode seperti:

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

Semoga ini bisa membantu seseorang.

Vinny
sumber

Bagaimana jika saya ingin menambah / menghapus grup Baris? Saya perlu memberikan fungsionalitas Master / Detail

Volatil3

Fungsi panggilan balik langsung aktif untuk saya.

Justin

Itu hanya pamer. Bekerja luar biasa meskipun (meskipun belum menguji fungsi callback). Suatu hari saya akan cukup tahu jQuery untuk bisa merekayasa balik itu.

kereta sebelum kuda

1

FYI: Ini sepertinya pecah jika konten baris target adalah tabel lain. Saya tidak punya waktu untuk melangkah lebih jauh tetapi apa yang saya temukan adalah bahwa itu meruntuhkan tabel anak, mengatur semua baris untuk disembunyikan, menambahkan beberapa padding aneh, dan kemudian tidak akan memperluas kembali baris-baris itu setelah Anda memanggil slideRow ('turun').

Chris Porter

1

Saya mengalami masalah yang sama seperti orang lain dengan tabel anak bertindak lucu ketika memanggil slideRow ('atas') dan kemudian slideRow ('bawah'). Saya tahu itu karena metode find ('td') yang digunakan dua kali dalam plugin. Saya mengubah ini menjadi anak-anak ('td') dan masalah segera hilang. Untuk masalah dengan sel th, cukup perbarui kedua contoh anak-anak ('td') ke anak-anak ('td, th').

OregonJeff

4

Anda dapat mencoba membungkus isi baris dalam <span>dan memiliki pemilih Anda menjadi $('#detailed_edit_row span');- agak meretas, tapi saya baru saja mengujinya dan berfungsi. Saya juga mencoba table-rowsaran di atas dan sepertinya tidak berhasil.

pembaruan : Saya telah bermain-main dengan masalah ini, dan dari semua indikasi jQuery membutuhkan objek yang melakukan slideDown untuk menjadi elemen blok. Jadi, tidak ada dadu. Saya dapat menyulap sebuah tabel di mana saya menggunakan slideDown pada sel dan itu tidak mempengaruhi tata letak sama sekali, jadi saya tidak yakin bagaimana pengaturan Anda. Saya pikir satu-satunya solusi Anda adalah untuk memperbaiki tabel sedemikian rupa sehingga tidak masalah dengan sel yang menjadi blok, atau hanya .show();masalah sialan. Semoga berhasil.

Paolo Bergantino
sumber

1

Anda tidak dapat menghidupkan tag tr dan td. Anda harus membungkus isi setiap td dengan div, kemudian menghidupkan div, lalu menyembunyikan / tunjukkan tr:<td><div style="display:block">contents</div></td>

Andrew

4

Pilih konten baris seperti ini:

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

.contents () - Dapatkan anak-anak dari setiap elemen dalam set elemen yang cocok, termasuk teks dan node komentar.

jaywiz
sumber

Anda juga harus memilih kolom juga, jadi kira-kira seperti itu $('tr > td').contents().slideDown(). Pastikan semua konten di dalam kolom dibungkus dengan tag, artinya <td>Some text</td>tidak akan berfungsi. Ini adalah solusi paling sederhana.

user2233706

3

Saya agak ketinggalan zaman dalam menjawab ini, tetapi saya menemukan cara untuk melakukannya :)

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

Saya baru saja memasukkan elemen div di dalam tag data tabel. ketika diatur terlihat, saat div mengembang, seluruh baris turun. kemudian katakan untuk memudar kembali (kemudian batas waktu sehingga Anda melihat efeknya) sebelum menyembunyikan baris tabel lagi :)

Semoga ini bisa membantu seseorang!

Andrew
sumber

3

Saya menemukan tabel dengan baris tersembunyi yang meluncur masuk dan keluar dari pandangan pada klik baris.

Tampilkan cuplikan kode

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

Luaskan cuplikan

Michael
sumber

3

Memiliki baris tabel dengan tabel bersarang:

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

Untuk slideDown baris:

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

Catatan: baris dan kontennya (ini dia "table") keduanya harus disembunyikan sebelum animasi dimulai.

Untuk menggeser ke atas:

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

Parameter kedua ( function()) adalah panggilan balik.

Sederhana!!

Perhatikan bahwa ada juga beberapa opsi yang dapat ditambahkan sebagai parameter fungsi geser atas / bawah (yang paling umum adalah durasi 'slow'dan 'fast').

Stalin Gino
sumber

Apakah Anda benar-benar meletakkan konten Anda di antara baris Anda, atau apakah itu salah ketik?

Vincent

2

Saya telah menyelesaikan ini dengan menggunakan elemen td di baris:

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

Animasi baris itu sendiri menyebabkan perilaku aneh, sebagian besar masalah animasi async.

Untuk kode di atas, saya menyoroti baris yang diseret dan dijatuhkan di tabel untuk menyorot bahwa pembaruan telah berhasil. Semoga ini bisa membantu seseorang.

Johann
sumber

Saya mendapatkaneffect is not a function

Savage

2

Saya memang menggunakan ide-ide yang disediakan di sini dan menghadapi beberapa masalah. Saya memperbaiki mereka semua dan memiliki satu liner halus yang ingin saya bagikan.

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

Ia menggunakan css pada elemen td. Ini mengurangi ketinggian hingga 0px. Dengan begitu hanya tinggi konten div-wrapper yang baru dibuat di dalam setiap elemen.

SlideUp lambat. Jika Anda membuatnya lebih lambat, Anda mungkin menyadari ada kesalahan. Lompatan kecil di awal. Ini karena pengaturan css yang disebutkan. Tetapi tanpa pengaturan itu, tinggi baris tidak akan berkurang. Hanya isinya yang mau.

Pada akhirnya elemen tr dihapus.

Seluruh baris hanya berisi JQuery dan tidak ada Javascript asli.

Semoga ini bisa membantu.

Berikut ini contoh kode:

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

darkwind
sumber

Posting ini persis dua tahun. Saya telah bekerja dengan jquery versi 3.2.0. Saya telah menguji kode hari ini dengan Chrome 73.0.3683.75 dan berhasil.

darkwind

1

Saya ingin menggeser seluruh tubuh dan saya telah mengatasi masalah ini dengan menggabungkan efek fade dan slide.

Saya telah melakukan ini dalam 3 tahap (langkah 2 dan 3 diganti jika Anda ingin meluncur ke bawah atau ke atas)

Menetapkan tinggi badan ke badan,
Fading all td dan th,
Geser tbody.

Contoh slideUp:

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

Penggigit
sumber

Bukankah ini memengaruhi seluruh tabel, alih-alih hanya baris tertentu?

Savage

1

Saya punya masalah dengan semua solusi lain yang ditawarkan tetapi akhirnya melakukan hal sederhana ini yang sehalus mentega.

Siapkan HTML Anda seperti itu:

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

Kemudian atur javascript Anda seperti ini:

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

Pada dasarnya, buat baris "tak terlihat" 0px tinggi, dengan div di dalamnya.
Gunakan animasi pada div (bukan baris) dan kemudian atur tinggi baris menjadi 1px.

Untuk menyembunyikan baris lagi, gunakan animasi yang berlawanan pada div dan atur tinggi baris kembali ke 0px.

Vincent
sumber

1

Saya menyukai plugin yang ditulis dan digunakan oleh Vinny. Tetapi dalam kasus tabel di dalam baris geser (tr / td), baris tabel bersarang selalu disembunyikan bahkan setelah meluncur. Jadi saya melakukan hack cepat dan sederhana di plugin untuk tidak menyembunyikan deretan tabel bersarang. Ubah saja baris berikut

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

untuk

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

yang hanya menemukan langsung bukan yang bersarang. Semoga ini bisa membantu seseorang menggunakan plugin dan memiliki tabel bersarang.

rajug
sumber

1

Saya ingin menambahkan komentar ke posting # Vinny tetapi tidak memiliki perwakilan jadi harus mengirim jawaban ...

Menemukan bug dengan plugin Anda - ketika Anda baru saja melewati sebuah objek dengan argumen mereka akan ditimpa jika tidak ada argumen lain yang dilewatkan. Mudah diselesaikan dengan mengubah urutan argumen diproses, kode di bawah ini. Saya juga menambahkan opsi untuk menghancurkan baris setelah ditutup (hanya karena saya membutuhkannya!): $ ('# Row_id'). SlideRow ('up', true); // hancurkan barisan

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

Mark Ball
sumber

Lupa menyebutkan Saya juga menambahkan di perbaikan anak-anak &

Mark Ball

0

Jika Anda perlu menggeser dan memudar baris tabel pada saat yang bersamaan, coba gunakan ini:

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

Andrew
sumber

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

Anda dapat menggunakan metode ini seperti:

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

Zernel
sumber

0

Saya bisa melakukannya jika Anda mengatur td di baris untuk menampilkan tidak ada pada saat yang sama Anda mulai menjiwai ketinggian di baris

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

Morten Holmgaard
sumber

0

Kode ini berfungsi!

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

Tuvia Khusid
sumber

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

});

Beruang beruang
sumber

Ini menunjukkan & menyembunyikan div yang berisi tabel. Bukan baris tabel seperti yang diminta OP.

shazbot

0

Steker yang ditawarkan oleh Vinny benar - benar dekat, tetapi saya menemukan dan memperbaiki beberapa masalah kecil.

Itu dengan rakus menargetkan elemen-elemen selain anak-anak dari barisan yang disembunyikan. Ini akan baik-baik saja jika kemudian mencari anak-anak itu ketika menunjukkan barisan. Ketika sudah dekat, mereka semua berakhir dengan "display: none" pada mereka, membuat mereka disembunyikan.
Itu tidak menargetkan elemen anak sama sekali.

Untuk sel tabel dengan banyak konten (seperti tabel bersarang dengan banyak baris), memanggil slideRow ('atas'), terlepas dari nilai slideSpeed yang disediakan, itu akan menutup tampilan baris segera setelah animasi padding dilakukan . Saya memperbaikinya sehingga animasi padding tidak memicu sampai metode slideUp () pada pembungkus selesai.

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

OregonJeff
sumber

@circuitry, apakah Anda memiliki sesuatu yang spesifik untuk ditawarkan atau apakah kritik Anda memadai?

OregonJeff

@ Regoneff Jujur saja. Saya mencari sesuatu yang lebih sederhana. Seharusnya tidak perlu 109 baris kode untuk menggeser baris tabel.

sirkuit

@circuitry, itu tidak menjadi lebih sederhana jika Anda ingin dapat digunakan sebagai plugin (dan tidak hanya terlibat dalam praktik buruk kode penggunaan-spesifik) dengan kemampuan untuk mengontrol kecepatan, pelonggaran, dan memiliki callback pada disesuaikan dasar. Karena ini adalah sesuatu yang akan Anda sertakan dalam pustaka kode Anda dan dapat digunakan untuk implementasi apa pun yang memerlukan baris tabel bentangkan / runtuh, saya tidak yakin mengapa itu penting bahwa itu adalah 109 baris kode.

OregonJeff

0

Perbaikan Cepat / Mudah:

Gunakan JQuery .toggle () untuk menampilkan / menyembunyikan baris onclick dari salah satu Row atau Anchor.

Fungsi harus ditulis untuk mengidentifikasi baris yang ingin Anda sembunyikan, tetapi beralih membuat fungsi yang Anda cari.

Daniel Adams
sumber

Saya pikir ini sudah disarankan dalam jawaban ini ...

DarkCygnus

Bagaimana cara Menggunakan fungsi slideDown (atau show) pada baris tabel?

Jawaban:

Untuk slideDown baris:

Untuk menggeser ke atas: