Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    12,445

    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
    5,675
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    12,445
    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 © 2024 vBulletin Solutions, Inc. All rights reserved.