Rotation des lignes d'un tableau

Tulifer
Javascript

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

yanis-git
Réponse acceptée

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/

Tulifer
Auteur

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