Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Slide up e down per righe tabella

  1. #1
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    11,216

    Slide up e down per righe tabella

    Ho bisogno di mostrare e nascondere righe di una tabella con un'animazione.
    Attualmente con questo codice riesco a mostrare/nascondere le righe, ma senza animazione
    codice:
    <table class="table">
        <tr class="header">
            <th>Prima riga</th>
        </tr>
        <tr>
            <td>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</td>
        </tr>
        <tr class="header">
            <th>Seconda riga</th>
        </tr>
        <tr>
            <td>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</td>
        </tr>
    </table>
    
    <script>
        $(document).ready(function() {
            $('.table .header').on("click", function() {
                $(this).toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
                    return this.style.display === 'table-row' ? 'none' : 'table-row';
                });
            });
        })
    </script>
    Non so quanto siano alte le righe della tabella perché il contenuto cambia dinamicamente secondo l'input degli utenti, quindi non posso indicare quanti px deve coprire l'animazione.
    Come posso risolvere?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,015
    La cosa non è così scontata. L'ingombro di una tabella, e suoi relativi elementi, è determinato dal proprio contenuto.
    Un trucco, infatti, è quello di utilizzare un ulteriore div che avvolga il contenuto di ciascun td (o th), quindi lavorare su questo.

    Potresti partire da una roba del genere:
    codice:
    <table class="table" >
        <tr class="header">
            <th>Prima riga</th>
        </tr>
        <tr>
            <td><div>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</div></td>
        </tr>
        <tr class="header">
            <th>Seconda riga</th>
        </tr>
        <tr>
            <td><div>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</div></td>
        </tr>
    </table>
    
    <script>
        $(document).ready(function() {
            $('.table .header').on("click", function() {
                $(this).toggleClass("active", "").nextUntil('.header')
                .find('>td>div').slideToggle();
            });
        })
    </script>
    Eventualmente potresti anche creare il div al volo con una cosa tipo .wrapInner('<div />'), ma in tal caso andranno fatte opportune considerazioni.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    11,216
    Grazie, col trucchetto del div sono riuscito a farlo funzionare anche senza js, sfruttando solo la classe collapse di bootstrap.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.