Une meilleure façon de déterminer pair/impair de lignes dans le tableau

Dire que vous avez une page web avec l'exemple de code suivant:

<tr class="even">
    <td>something1</td>
    <td colspan="1">somthing1.1</td>
</tr>


<tr class="odd">
    <td>something2</td>
    <td><b>something2.1</b></td>
</tr>

<tr class="even">
    <td>something3</td>
    <td><b>something3.1</b></td>
</tr>

Ils ne sont pas dans une boucle, j'ai donc explicitement dire 'même' "étrange". Si, plus tard, nous décidons d'ajouter une nouvelle ligne entre something2 et something3 ensuite, nous devons changer 'même' "étrange" pour le reste des lignes.

Est-il moyen en css pour faire cela automatiquement dans IE6?

Actuellement, c'est mon code css pour la même

.headerTable tr.even {
    font-weight : bold;
    font-size : 9pt;
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
    background-color: #FFFFFF;
    height: 20px;
    color: #000000;
}

J'ai déjà eu jQuery

s'il vous plaît prêter plus d'attention à la mise en forme et l'orthographe de vos questions dans l'avenir.
Vous dites "ce ne sont pas dans une boucle" - où les données sont-forme - êtes-vous d'entrer le code HTML à la main?
Je suppose que c'est ce qu'il dit. Fait sens pour moi...
ouais à la main.

OriginalL'auteur n00bstackie | 2009-06-01

css html

13

Donner jQuery essayer. Ensuite, vous pouvez simplement faire ceci:
```
   $("#myTable tbody tr:visible:even",this).addClass("even"); 
   $("#myTable tbody tr:visible:odd",this).addClass("odd");
```
": Visible" sélecteur n'est pas vraiment nécessaire, mais lorsque vous appliquez un filtre à une table en faisant quelques lignes masquées, la méthode fonctionne toujours correctement.

Utilisation de jQuery pour faire cela est vraiment exagéré.
Utilisation de jQuery pour faire JUSTE cela est en effet excessif. Mais à l'aide de jQuery a beaucoup d'autres avantages qu'un développeur web peut être intéressé par
Pas si il est déjà à l'aide de jQuery.
C'est exagéré jusqu'à ce que vous vous retrouvez avec beaucoup de JavaScript sur votre site et en vous souhaitant avait commencé à sortir avec jQuery depuis le début.
Hey, je suis un grand fan de jQuery - je pense tout de suite sauter à "voici comment le faire avec jQuery" est un dangereux état d'esprit, pour ne pas mentionner tout le monde ne veut introduire une bibliothèque à leur site web pour quelque chose d'aussi simple que les zèbres lignes. Dans ce cas, l'OP était déjà à l'aide de jQuery donc pas de mal fait, donc je suppose que c'est discutable de toute façon.

OriginalL'auteur Philippe Leybaert
12

La façon de le faire serait d'utiliser le nth-child(encore) et (impair) des règles. Malheureusement, et cela devrait venir en tant qu'aucune surprise, IE6 ne supporte pas cela. Si vous avez un peu d'options:

A) l'Utilisation de Javascript, avec l'inconvénient évident que cela ne fonctionne pas pour les personnes avec JS désactivé:
```
var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd';
}
```
Si vous pensez avoir besoin de plus de dynamique côté client, comportement sur votre demande, vous pouvez ensuite vérifier une librairie comme jQuery. Pour juste ce c'est inutile, mais il rend l'utilisation de Javascript dans les navigateurs un jeu d'enfant. Vous feriez ci-dessus avec jQuery comme il est montré dans cette réponse.

En fonction de votre public, Javascript peut être parfaitement acceptable. Si elle ne l'est pas, alors peut-être que vous pouvez...

B) Simplifier votre CSS et de continuer à le faire manuellement. Vous pouvez seulement de marquer les lignes impaires avec une classe, puis de faire la ligne de style par défaut le même style. Cela vous fera économiser de travail lors du déplacement de choses autour.

C) Générer les lignes de la programmation. Il est vraiment archaïque à la saisie de données, comme dans un tableau fixe, si vous allez le mettre à jour assez souvent que c'est un problème. Je suis évidemment inconscient de votre situation, mais il doit être facile de le faire dans une boucle en quelque sorte avec un simple langage comme PHP.

D) Cesser d'utiliser un navigateur obsolète. 🙂 (C'est en ne plaisantant qu'à moitié, comme je suis sûr que c'est hors de votre contrôle)

A et C sont de grandes options; D est au-delà de nombreux développeurs de contrôle comme beaucoup d'administrateurs système ne peut prendre le risque de briser les anciens applications qui ont été développées avec un IE6 seule attitude.
En "Une", vous devez dire quelque chose à propos de jQuery 😉
Des beaux. Si vous insistez. 🙂
L'opérateur conditionnel partie peut être: x%2? 'odd' : 'even';. 😉
Merci de votre Code a Aidé Beaucoup.

OriginalL'auteur Paolo Bergantino
8

La meilleure approche serait la :nth-child() pseudo-classe.

Mais malheureusement il n'est pas largement encore pris en charge. Ainsi, vous aurez probablement besoin d'utiliser le JavaScript pour le faire.

OriginalL'auteur Gumbo
5

Utilisation de jQuery pair/impair enfant la mise en œuvre

Utilisation de jQuery pour faire cela est vraiment exagéré.
Pas si il est déjà à l'aide de jQuery.

OriginalL'auteur Mork0075
0

Oui. Vous pouvez utiliser JavaScript à exécuter par le biais de ces éléments et de réinitialiser leurs classes selon les paires/impaires.

OriginalL'auteur Assaf Lavie

Vous devez vous connecter pour publier un commentaire.