Rotation des lignes d'un tableau

Ce sujet est résolu
Default
,

Bonjour,

J'ai actuellement un tableau html avec une en-tete et plusieurs lignes de données. Je souhaite afficher mon en-tete + 5 lignes de données.
Mon tableau contient plus de 5 lignes de données, je souhaite donc une rotation des lignes.
Par exemple j'ai 13 lignes
J'affiche les 5 premières, 5seconde apres la première disparait et j'affiche la sixième etc

Je n'ai absolument aucune idée de comment faire, je suis donc prenneur de toutes les idées que vous avez.

Voici mon code html

<table>
            <thead>
                <tr>
                    <th style="width: 150px;">Serveur</th>
                    <th style="width: 500px;">Alerte</th>
                    <th style="width:auto;">Output</th>
                </tr>
            </thead>
            <tbody>
                <tr class="event">
                    <td style="padding-left:5px;">TEST1</td>
                    <td>TEST1</td>
                    <td>TEST1</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST2</td>
                    <td>TEST2</td>
                    <td>TEST2</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST3</td>
                    <td>TEST3</td>
                    <td>TEST3</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST4</td>
                    <td>TEST4</td>
                    <td>TEST4</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">test5</td>
                    <td>test5</td>
                    <td>test5</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">test6</td>
                    <td>test6</td>
                    <td>test6</td>
                </tr>   
                <tr class="event">
                    <td style="padding-left:5px;">test7</td>
                    <td>test7</td>
                    <td>test7</td>
                </tr>                   
            <tbody>
        </table>

Merci de vos réponse et bonne journée ;)

2 Réponse

116947
,

Tu dois utiliser les selecteur css tel que : https://jsfiddle.net/0mrf840q/

/* selectionne de la 1er à la 4eme */
table tbody tr:nth-child(n+1):nth-child(-n+4){
    background-color: green;
}
/* selectionne de la 4eme à la 8eme */
table tbody tr:nth-child(n+4):nth-child(-n+8){
    background-color: red;
}

Dans l'espoir que cela t'aide.

Plus d'information ici : http://nthmaster.com/

Default
, Il a répondu à ma question !

Merci, je vais essayer et je reviendrais si j'ai un problème.