Sélecteurs jQuery pour les lignes paires/impaires d'un tableau

Question

Sélecteurs jQuery pour les lignes paires/impaires d'un tableau

Demandé el 12 de Juillet, 2011: Quand la question a-t-elle été
20506 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Le code contenu dans le premier bloc de code est le code source. Après l'exécution du code source. Le code sera modifié (voir le deuxième bloc de code).

Je veux que la classe (c'est-à-dire 'pair' et 'impair') de l'étiquette ne soit affichée que dans la 'table1'. Cependant, une table secondaire (i.e. 'table2') contient également les classes 'paires' et 'impaires' de chaque balise.

Quelqu'un peut-il m'aider ? Merci d'avance.

-----------Premier bloc de code--------------

<head>
<script type="text/javascript">
            $(document).ready(function(){
                $("#table1 tr:odd").addClass("odd");
                $("#table1 tr:not(.odd)").addClass("even");  
            });
</script>
</head>

<body>

<table id="table1">
    <tr>
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>
            <table id="table2">
                   <tr></tr>
                   <tr></tr>
            <table>
        </td>
    </tr>

</table>
</body>

-----------2nd Code Block---------------

<table id="table1">
    <tr class="even">
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr class="odd">
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr class="even">
        <td>
            <table id="table2">
                   <tr class="even"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>

Demandé el 12 de Juillet, 2011 par Acubi

Answer 1

5 Réponses

Answer 2

14voto

James Montagne Points 44517

Toutes les réponses affichées sont presque correctes

$(document).ready(function(){
    $("#table1 > tbody > tr:odd").addClass("odd");
    $("#table1 > tbody > tr:not(.odd)").addClass("even");  
});

De nombreux navigateurs ajoutent automatiquement un tbody à votre table, même si vous n'en ajoutez pas vous-même. Ainsi, le #table1 > tr ne correspondra pas parce que tr n'est pas un enfant direct de table . Le mieux est d'utiliser la méthode ci-dessus et d'ajouter explicitement un élément tbody pour les navigateurs qui ne le font pas pour vous.

 <table id="table1">
      <tbody>
        <tr class="even">
            <td>AAA</td>
            <td>CCC</td>
        </tr>
        <tr class="odd">
            <td>BBB</td>
            <td>DDD</td>
        </tr>
        <tr class="even">
            <td>
                <table id="table2">
                   <tbody>
                       <tr class="even"></tr>
                       <tr class="odd"></tr>
                   </tbody>
                <table>
            </td>
        </tr>
      <tbody>

</table>

http://jsfiddle.net/5ETAD/1/

Répondu el 12 de Juillet, 2011 par James Montagne (44517 Points )

Answer 3

1voto

Chris Laplante Points 18060

Il devrait l'être :

$("#table1>tr:odd").addClass("odd");
$("#table1>tr:not(.odd)").addClass("even");

Répondu el 12 de Juillet, 2011 par Chris Laplante (18060 Points )

Answer 4

1voto

Tudor Olariu Points 1000

Pour éviter une traversée redondante du DOM, vous pouvez utiliser quelque chose comme ceci :

$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')

Répondu el 8 de Juillet, 2013 par Tudor Olariu (1000 Points )

Answer 5

0voto

jSang Points 3397

Vous pourriez utiliser la formule suivante (remarquez le signe plus grand que) :

       $(document).ready(function(){
            $("#table1 > tr:odd").addClass("odd");
            $("#table1 > tr:not(.odd)").addClass("even");  
        });

Cette opération permet de sélectionner uniquement les tr's des enfants immédiats.

Répondu el 12 de Juillet, 2011 par jSang (3397 Points )

Answer 6

-1voto

Chandu Points 40028

Utiliser le enfant direct sélecteur.

Vous pouvez également utiliser :even au lieu de :not(.odd)

$(document).ready(function(){                 
  $("#table1 > tr:odd").addClass("odd");                 
  $("#table1 > tr:even").addClass("even");               
});

Répondu el 12 de Juillet, 2011 par Chandu (40028 Points )

Sélecteurs jQuery pour les lignes paires/impaires d'un tableau

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Sélecteurs jQuery pour les lignes paires/impaires d'un tableau

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: