jQuery modifier toutes les classes tr après une spécification

Question

J'ai une table de données avec des couleurs d'arrière-plan en ligne alternées. J'ai un script AJAX pour supprimer une ligne. Je ne peux pas trouver un moyen de changer la classe de toutes les lignes en dessous de celle qui a été supprimée pour qu'elle alterne correctement à nouveau.

Par exemple, en considérant ce qui suit:

`<tr id="1" class="row1"> 
    <td>blah</td> 
</tr> 
<tr id="2" class="row2"> 
    <td>blah</td> 
</tr> 
<tr id="3" class="row1"> 
    <td>blah</td> 
</tr> 
<tr id="4" class="row2"> 
    <td>blah</td> 
</tr>` 

Maintenant, en utilisant mon script AJAX, je supprimer ID2, puis id3 se déplacera sous ID1 et ils auront la même couleur de la ligne. J'ai réussi à faire en sorte que mon script change la prochaine classe tr, mais cela n'aide pas vraiment parce que c'est juste la même couleur que celle qui suit. Je n'arrive pas à comprendre comment parcourir tous les tr suivant et changer leur classe en conséquence.

Ce que j'ai jusqu'à présent:

$('#news_' + id).fadeOut('slow'); 

var currtr = $('#news_' + id).attr('class'); 
var nexttr = $('#news_' + id).closest('tr').next('tr').attr('id'); 

$('#' + nexttr).removeClass($('#' + nexttr).attr('class')); 
$('#' + nexttr).addClass(currtr); 

Answer 1

Vous pouvez tout simplement itérer sur les éléments visibles<tr> et retirez la classe des même ceux, et appliquer aux impairs.

Quelque chose comme ceci:

Exemple:http://jsfiddle.net/2CZdT/

$('tr:odd').addClass('odd'); 

$('td').click(function() { 
    $(this).parent().fadeOut(function() { 
     $(this).siblings('tr:visible').filter(':even').removeClass('odd') 
      .end().filter(':odd').addClass('odd'); 
    }); 
});​ 

Je l'événement, cliquez sur le <td>, donc quand on clique dessus, il parcourt jusqu'à l'élément parent <tr>, se fane il out, le dans le rappel, il attrape tous visible frères et sœurs <tr> éléments, filtre les pairs, supprime la classe .odd, puis remonte et filtre les impairs et ajoute la classe .odd.

Notez que cela suppose qu'une classe par défaut est appliquée dans votre CSS, puis vous surchargez les uns avec les autres (ou pairs) avec la classe en alternance.

Answer 2

plus simple est d'aller sur toute la table à nouveau, par exemple ajoutez ceci après la fadeOut:

$('#id_of_your_table tr:even').addClass('even');

Modifier: à la réflexion, qui ne fonctionne pas depuis la ligne que vous fanée existe toujours, mais juste n'est pas visible. Vous devez le supprimer du DOM ou l'ignorer lors de la réapplication de l'effet zèbre. Exemple:

$('#news_' + id) 
    .fadeOut('slow') 
    .remove() 
    .closest('table') 
    .find('tr:even').addClass('even');

Ou:.

$('#news_' + id) 
    .fadeOut('slow') 
    .addClass('skip') 
    .closest('table') 
    .find('tr:not(.skip):even').addClass('even');

Vous pouvez également cibler directement la table comme dans le premier exemple, mais vous pourriez aussi bien déplacer vers le haut de la ligne fanée à la table son dans

Answer 3

Vous pouvez utiliser le next siblings selector pour obtenir toutes les lignes suivant celle que vous allez supprimer. Supprimez la ligne souhaitée. Ensuite, vous devriez déjà avoir les frères et sœurs suivants, alors juste .each() eux et changez leur classe.

E.g.

var followingRows = $("#id2 ~ tr"); 
$("#id2").remove(); 
followingRows.each(function() { 
    if (this.is('.even') 
     this.removeClass('even').addClass('odd'); 
    else 
     this.removeClass('odd').addClass('even'); 
}); 

Quelque chose près que ...

Answer 4

Laissez CSS faire le travail pour vous.

table tr:nth-child(2n+1) { 
    background-color: #eef; 
} 

non JavaScript est requis! =)

Answer 5

je ferais quelque chose comme ceci:

$('news_' + id).fadeOut('slow', function() { 
    $(this).remove(); 
}); 
var i = 1; 
$('tr').removeClass().each(function() { 
    if (i == 1) { 
     $(this).addClass('row' + i); 
     i++; 
    } else { 
     $(this).addClass('row' + i); 
     i--; 
    } 
});