Jak korzystać z funkcji SlideDown (lub show) w wierszu tabeli?

214

Próbuję dodać wiersz do tabeli i wyświetlić ten wiersz w widoku, jednak funkcja slajdu wydaje się dodawać styl display: block do wiersza tabeli, który zaburza układ.

Jakieś pomysły na obejście tego?

Oto kod:

$.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
źródło

Czy to musi być stół? Myślę, że być łatwiejszym bez stołu.

MrChrister

fadeIni fadeOutpracuj nad rzędami tabel i stwórz przyjemny alternatywny efekt wizualny (testowany tylko w Firefoksie)

Savage

295

Animacje nie są obsługiwane w wierszach tabeli.

Z „Learning jQuery” Chaffera i Swedberga

Rzędy tabeli stanowią szczególne przeszkody dla animacji, ponieważ przeglądarki używają różnych wartości (wiersz tabeli i blok) dla ich widocznej właściwości wyświetlania. Metody .hide () i .show () bez animacji są zawsze bezpieczne w przypadku wierszy tabeli. Od wersji jQuery 1.1.3 można również używać .fadeIn () i .fadeOut ().

Możesz owinąć zawartość td w div i użyć na tym slajdu. Musisz zdecydować, czy animacja jest warta dodatkowego znacznika.

Emilia
źródło

5

Działa świetnie! Jest jeszcze jedna drobna gotcha: będziesz musiał animować wypełnienie komórki, jeśli takie istnieje. Ale to też nie jest wielka sprawa.

Adrian Grigore,

11

Możesz animować wypełnienie w następujący sposób:$('tr').find('td').animate({padding: '0px'}, {duration: 200});

Andrew

@Emily: Czy możesz wskazać konkretne wiersze źródła jQuery? Kusi mnie, by zhakować źródło mojego projektu.

Randomblue,

7

Nie jest to bezpośrednia odpowiedź, ale zauważyłem, że użycie fadeIn / fadeOut jest prawie tak samo dobre w większości sytuacji i wydaje się, że działa dobrze w wierszach tabeli.

Phil LaNasa

@PhilLaNasa Na początku byłem jak „Nie, to nie będzie dobrze wyglądać”, ale potem spróbowałem i wyglądało to naprawdę dobrze! Dzięki za wyjazd!

Kenton de Jong,

157

Po prostu owijam tr dynamicznie, a następnie usuwam go po zakończeniu SlideUp / slideDown. To dość mały narzut dodający i usuwający jeden lub kilka tagów, a następnie usuwający je po zakończeniu animacji, nie widzę żadnego widocznego opóźnienia podczas robienia tego.

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

 });

Zjechać w dół:

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

 });

Muszę oddać hołd fletchzone.com, kiedy wziąłem jego wtyczkę i rozebrałem ją z powrotem do powyższego, okrzyki kolego.

wiks
źródło

Dzięki! Jakoś to dla mnie zadziałało: 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,

Jedynym problemem jest niewielkie opóźnienie między komórkami.

Archimedes Trajano,

41

Oto wtyczka, którą napisałem na ten temat, trochę bierze z implementacji Fletcha, ale moja służy wyłącznie do przesuwania wiersza w górę lub w dół (bez wstawiania wierszy).

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

Podstawowe użycie:

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

Przekaż opcje slajdów jako indywidualne argumenty:

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

Zasadniczo, w przypadku animacji zsuwania w dół, wtyczka otacza zawartość komórek w DIV, animuje je, a następnie usuwa i odwrotnie w przypadku slajdu w górę (z kilkoma dodatkowymi krokami, aby pozbyć się wypełnienia komórki). Zwraca również obiekt, do którego go wywołałeś, dzięki czemu możesz łączyć takie metody:

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

Mam nadzieję, że to komuś pomoże.

Vinny
źródło

Co jeśli chcę dodać / usunąć grupę wierszy? Muszę podać funkcję Master / Detail

Volatil3

Funkcja oddzwaniania jest dla mnie natychmiast uruchamiana.

Justin

To po prostu popisywanie się. Działa niesamowicie (choć nie przetestowałem funkcjonalności wywołania zwrotnego). Pewnego dnia poznam wystarczająco dużo jQuery, aby móc to przeprogramować.

cartbeforehorse

1

FYI: Wydaje się to załamać, jeśli zawartość docelowego wiersza jest inną tabelą. Nie mam czasu, aby iść dalej, ale znalazłem, że zwija tabelę podrzędną, ustawia wszystkie wiersze na ukryte, dodaje dziwne wypełnienie, a następnie nie będzie ponownie rozszerzać tych wierszy po wywołaniu slideRow ('na dół').

Chris Porter

1

Zetknąłem się z tymi samymi problemami, co inne, w których tabele podrzędne działały zabawnie, gdy wywoływałem slideRow („góra”), a następnie slideRow („dół”). Doszedłem do wniosku, że dzieje się tak z powodu dwukrotnego użycia metody find ('td') we wtyczce. Zmieniłem to na dzieci („td”) i problemy natychmiast zniknęły. W przypadku problemów z komórkami th, po prostu zaktualizuj oba wystąpienia dzieci („td”) do dzieci („td, th”).

OregonJeff

4

Możesz spróbować zawinąć zawartość wiersza w a <span>i mieć selektor $('#detailed_edit_row span');- trochę hacking, ale właśnie go przetestowałem i działa. Wypróbowałem również table-rowpowyższą sugestię i nie działała.

aktualizacja : Pracowałem z tym problemem i ze wszystkich wskazań, jQuery potrzebuje obiektu, który wykonuje SlideDown, aby był elementem blokowym. Więc nie ma kości. Byłem w stanie wyczarować tabelę, w której użyłem SlideDown na komórce i nie miało to żadnego wpływu na układ, więc nie jestem pewien, jak twoja jest skonfigurowana. Myślę, że twoim jedynym rozwiązaniem jest przefakturowanie stołu w taki sposób, aby było w porządku z tą komórką będącą blokiem lub po prostu .show();cholerną rzeczą. Powodzenia.

Paolo Bergantino
źródło

1

Nie można animować tagów tr i td. Musisz owinąć zawartość każdego td div, następnie animować div, a następnie ukryć / pokazać tr:<td><div style="display:block">contents</div></td>

Andrew

4

Wybierz zawartość wiersza w ten sposób:

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

.contents () - Uzyskaj elementy potomne każdego elementu w zestawie dopasowanych elementów, w tym węzłów tekstowych i komentarzy.

jaywiz
źródło

Musisz także wybrać kolumnę, więc coś w stylu $('tr > td').contents().slideDown(). Upewnij się, że cała zawartość wewnątrz kolumny jest owinięta tagiem, tzn. <td>Some text</td>Nie będzie działać. To jest najprostsze rozwiązanie.

user2233706

3

Odpowiadam na to trochę za późno, ale znalazłem sposób na to :)

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

Właśnie wstawiłem element div do znaczników danych tabeli. gdy jest ustawiony jako widoczny, gdy div rozszerza się, cały rząd spada. następnie powiedz, aby zniknął (potem upłynął limit czasu, aby zobaczyć efekt), zanim ponownie ukryjesz wiersz tabeli :)

Mam nadzieję, że to komuś pomoże!

Andrzej
źródło

3

Potrzebowałem tabeli z ukrytymi wierszami, które przesuwają się i znikają z widoku po kliknięciu wiersza.

Pokaż fragment kodu

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

Rozwiń fragment kodu

Michael
źródło

3

Mają wiersz tabeli z tabelą zagnieżdżoną:

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

Aby przesunąć W dół wiersza:

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

Uwaga: zarówno wiersz, jak i jego zawartość (tutaj "table") powinny zostać ukryte przed rozpoczęciem animacji.

Aby przesunąć w górę wiersza:

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

Drugi parametr ( function()) to wywołanie zwrotne.

Prosty!!

Zauważ, że istnieje również kilka opcji, które można dodać jako parametry funkcji przesuwania w górę / w dół (najczęściej są to czasy trwania 'slow'i 'fast').

Stalin Gino
źródło

Czy rzeczywiście umieściłeś treść między wierszami, czy to była literówka?

Vincent

2

Ominąłem to, używając elementów td w rzędzie:

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

Animowanie samego wiersza powoduje dziwne zachowanie, głównie problemy z animacją asynchroniczną.

W powyższym kodzie podświetlam wiersz, który jest przeciągany i upuszczany w tabeli, aby podkreślić, że aktualizacja się powiodła. Mam nadzieję, że to komuś pomoże.

Johann
źródło

Dostajęeffect is not a function

Savage

2

Wykorzystałem przedstawione tu pomysły i napotkałem pewne problemy. Naprawiłem je wszystkie i mam gładką jedno-linijkę, którą chciałbym się podzielić.

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

Używa css na elemencie td. Zmniejsza wysokość do 0 pikseli. W ten sposób liczy się tylko wysokość zawartości nowo utworzonego opakowania div w każdym elemencie td.

SlideUp działa powoli. Jeśli sprawisz, że będzie jeszcze wolniej, możesz zauważyć usterkę. Mały skok na początku. Wynika to z wymienionego ustawienia css. Ale bez tych ustawień wysokość rzędu nie spadłaby. Tylko jego treść.

Na końcu element tr zostaje usunięty.

Cały wiersz zawiera tylko JQuery i brak rodzimego Javascript.

Mam nadzieję, że to pomoże.

Oto przykładowy kod:

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

ciemny wiatr
źródło

Ten post ma dokładnie dwa lata. Pracowałem z jquery w wersji 3.2.0. Testowałem dzisiaj kod z Chrome 73.0.3683.75 i działał.

darkwind

1

Chcę przesuwać całe ciało i udało mi się rozwiązać ten problem, łącząc efekty zanikania i przesuwania.

Zrobiłem to w 3 etapach (2. i 3. etap zostały zastąpione, jeśli chcesz zjechać w dół lub w górę)

Przypisywanie wysokości do ciała,
Zanikanie wszystkich td i th,
Przesuwne ciało.

Przykład slideUp:

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

Biter
źródło

Czy to nie wpływa na całą tabelę, a nie tylko na konkretny wiersz?

Savage

1

Miałem problemy ze wszystkimi innymi oferowanymi rozwiązaniami, ale ostatecznie zrobiłem tę prostą rzecz, która jest gładka jak masło.

Skonfiguruj kod HTML w następujący sposób:

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

Następnie skonfiguruj javascript w następujący sposób:

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

Zasadniczo, ustaw „niewidoczny” wiersz na 0px, z div wewnątrz.
Użyj animacji na div (nie w wierszu), a następnie ustaw wysokość wiersza na 1px.

Aby ponownie ukryć wiersz, użyj odwrotnej animacji na div i ustaw ponownie wysokość wiersza na 0px.

Vincent
źródło

1

Podobała mi się wtyczka, którą Vinny napisał i której używa. Ale w przypadku tabel w przesuwanym rzędzie (tr / td) rzędy zagnieżdżonej tabeli są zawsze ukryte, nawet po przesunięciu w górę. Zrobiłem więc szybki i prosty hack we wtyczce, aby nie ukrywać wierszy zagnieżdżonej tabeli. Po prostu zmień następujący wiersz

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

do

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

który znajduje tylko bezpośrednie tds, a nie zagnieżdżone. Mam nadzieję, że pomoże to komuś, kto korzysta z wtyczki i zagnieżdżone tabele.

rajug
źródło

1

Chciałbym dodać komentarz do wpisu # Vinny'ego, ale nie mam przedstawiciela, więc muszę opublikować odpowiedź ...

Znalazłem błąd we wtyczce - kiedy po prostu przekazujesz obiekt z argumentami, są one nadpisywane, jeśli nie zostaną przekazane żadne inne argumenty. Łatwo rozwiązane przez zmianę kolejności przetwarzania argumentów, kod poniżej. Dodałem również opcję niszczenia wiersza po zamknięciu (tylko, gdy miałem taką potrzebę!): $ ('# Row_id'). SlideRow ('up', true); // niszczy rząd

(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
źródło

Zapomniałem wspomnieć, że dodałem również poprawki dla dzieci i dzieci

Mark Ball

0

Jeśli chcesz przesuwać i przenosić wiersz tabeli jednocześnie, spróbuj użyć tych:

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

Andrzej
źródło

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

możesz użyć tych metod, takich jak:

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
źródło

0

Mogę to zrobić, jeśli ustawisz td w rzędzie, aby nie wyświetlał żadnych w tym samym czasie, gdy zaczniesz animować wysokość w rzędzie

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
źródło

0

Ten kod działa!

<!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
źródło

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

});

Niedźwiedź niedźwiedz
źródło

Pokazuje i ukrywa div zawierający tabelę. Nie wiersz tabeli, jak poprosił PO.

shazbot

0

Wtyczka oferowana przez Vinny jest bardzo bliska, ale znalazłem i naprawiłem kilka drobnych problemów.

Chciwie celował w elementy TD poza ukrytymi dziećmi z rzędu. Byłoby to w porządku, gdyby szukał tych dzieci, pokazując wiersz. Mimo że wszystko się zbliżyło, wszystkie z nich zawierały „display: none”, co ukrywało ich.
W ogóle nie był ukierunkowany na elementy potomne.

W przypadku komórek tabeli z dużą ilością treści (takich jak tabela zagnieżdżona z dużą ilością wierszy) wywołanie slideRow („w górę”), niezależnie od podanej wartości slideSpeed, zwinąłoby widok wiersza, jak tylko animacja wypełniania zostanie zakończona . Naprawiłem to, aby animacja wypełniania nie uruchamiała się, dopóki nie zostanie wykonana metoda slideUp () na zawijaniu.

(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
źródło

@circuitry, czy miałeś coś do zaoferowania lub czy Twoja krytyka jest wystarczająca?

OregonJeff,

@Oregoneff Po prostu będąc szczerym. Szukam czegoś prostszego. Przesunięcie wiersza tabeli nie powinno zająć 109 wierszy kodu.

obwodów elektrycznych

@circuitry, nie jest prostsze, jeśli chcesz być w stanie używać jako wtyczki (a nie tylko angażować się w złą praktykę kodu specyficznego dla użytkowania) z możliwością kontrolowania szybkości, łagodzenia i wywoływania zwrotnego na dostosowywalnym podstawa. Ponieważ jest to coś, co należy uwzględnić w bibliotece kodu i może być używane do dowolnej implementacji, która wymaga rozwijania / zwijania wierszy tabeli, nie jestem pewien, dlaczego to tak ważne, że jest to 109 linii kodu.

OregonJeff,

0

Szybka / łatwa naprawa:

Użyj JQuery .toggle (), aby pokazać / ukryć wiersze po kliknięciu Row lub Anchor.

Trzeba będzie napisać funkcję, aby zidentyfikować wiersze, które chcesz ukryć, ale przełącznik tworzy funkcjonalność, której szukasz.

Daniel Adams
źródło

Myślę, że zostało to zasugerowane już w tej odpowiedzi ...

DarkCygnus,

Jak korzystać z funkcji SlideDown (lub show) w wierszu tabeli?

Odpowiedzi:

Aby przesunąć W dół wiersza:

Aby przesunąć w górę wiersza: