Comment puis-je supprimer un tr puis appliquer une couleur de fond à tr impair?

Question

sur doc.ready, j'ai fait $("tr:even").css("background-color","orange");. J'ai alors un bouton qui fait ce qui suit: $("#tr3).remove() qui supprime le 3ème tr (j'ai id'ed le troisième tr "tr3"). J'applique ensuite l'orange bgcolor aux lignes paires AGAIN afin de mettre à jour les tr bgcolors maintenant que la table a 1 tr de moins, mais les tr bgcolor ne sont pas actualisés. Je me retrouve avec 2 tr orange d'affilée, au lieu d'avoir tous les autres tr fond orange. avoir un sens?

Answer 1

essayez d'appliquer également sur l'intrus:

$("tr:odd").css("background-color","your color"); 
$("tr:even").css("background-color","orange"); 

que je pense qu'il est parce que lorsque vous retirez la 3ème B, tout à côté de tr change. l'impair devient pair et le pair devient impair.

Answer 2

Il serait plus facile si vous avez fait cette couleur d'arrière-plan une classe CSS:

.odd { background-color: orange; } 

Puis en javascript:

$(function() { 
    $("tr:even").addClass("odd"); 
    $("#button").click(function() { 
    $("#tr3").remove(); 
    $("tr").removeClass("odd").filter(":nth-child(odd)").addClass("odd"); 
    }); 
}); 

Answer 3

Vous pouvez l'utiliser pour accéder au nième élément:

$("tr:nth-child(3n)") //will match with 3rd, 6th, ... 

vous pouvez changer 3n ou faire simplement ajouter et soustraire:

$("tr:nth-child(3n+1)") //will match with 1st, 4th, 7th, ... 
$("tr:nth-child(3n+2)") //will match with 2nd, 5th, 8th, ... 

:nth peut être utilisé dans le filtre aussi, par exemple:

$(SELECTOR).filter(":nth-child(3n)") 

J'espère que c'est ce que vous recherchez.

MISE À JOUR:

Après relisez votre question, je chose que j'eu tort.

Dans mon code, je mets le code en fonction séparée:

function zebra_table($) { 
    $("tr").removeClass("odd"); 
    $("tr:odd").addClass("odd"); 
} 

Puis, après que je change la ligne de la table, comme supprimer un, ou ajouter une nouvelle ligne, je vais simplement appeler la fonction ci-dessus :

jQuery(function($){ 
    //after DOM loaded, apply zebra 
    zebra_table($); 

    //... 
    //after modify table 
    zebra_table($); 
}); 

La clé est de redéfinir la table, puis de réappliquer les règles zébrées dans la structure de table actuelle.

Answer 4

Tout, merci beaucoup pour votre aide !!! J'ai fini par faire ce qui suit:

$(document).ready(function() { 
    $("tr:odd").addClass("odd"); 
    $("#button").click(function() { 
     $("#tr3").remove(); 
     $("tr").removeClass("odd"); 
     $("tr:odd").addClass("odd"); // re-add class to odd tr's 
    }); 
}); 

et cela a fonctionné! N'a pas besoin de faire des trucs de filtre (n). Merci encore pour votre aide!!!