Jquery question impaire/pair avec préfixe/ajouter

Question

J'utilise avec succès les sélecteurs jquery impair/pair pour créer un "striping tigre" sur une table. Ensuite, j'ai ajouté la possibilité d'ajouter ou de supprimer des lignes. Cependant, je n'ai pas été en mesure d'obtenir un striping pour fonctionner correctement sur l'ajout/suppression de ligne. Cela fonctionne pour un ajout/ajout, mais pas pour ajouter/ajouter ou supprimer. Voici résumé du code ...

$(document).ready(function(){ 

    // click on Add Row button 
    $("#addButton").click(function(){ 
     // add a row to table 
     addTableRow('#myTable');       
     // then re-apply tiger striping 
     stripeRows(); 
    }); 
}); 


// remove specified row 
function removeRow(row) { 
    $(row).parent("tr").remove(); 
    stripeRows(); 
} 


function StripeRows() 
{ 
    $("#myTable").each(function(){ 
     $(this).find("tr:even").addClass("evenrow"); 
     $(this).find("tr:odd").addClass("oddrow"); 
    }); 
} 

Answer 1

Vous devez effacer votre précédente striping première:

function StripeRows() 
{ 
    $("#myTable").each(function(){ 
     $(this).find("tr").removeClass('evenrow oddrow'); 
     $(this).find("tr:even").addClass("evenrow"); 
     $(this).find("tr:odd").addClass("oddrow"); 
    }); 
} 

Sinon, vous vous retrouverez avec les lignes qui ont à la fois evenrow et oddrow classes.

Answer 2

Cela ne fonctionne probablement pas parce que vous ne supprimez pas l'ancienne classe.

J'ai deux conseils:

1. Ne pas utiliser la :even et :odd. Ceux-ci ne se comportent généralement pas comme prévu. Au lieu de cela, utilisez :nth-child(even) et :nth-child(odd) respectivement; et
2. Ne pas avoir des classes paires et impaires. Vous n'avez pas besoin d'eux tous les deux. Il suffit d'utiliser une classe impaire (ou paire) et de faire en sorte que le style de la table couvre l'autre cas.

Alors vous devez faire quelque chose comme ceci:

function StripeRows() { 
    $("#mytable > tbody > tr").removeClass("oddrow") 
    .filter(":nth-child(odd)").addClass("oddrow"); 
} 

Cette fonction supprime les classes « oddrow » de toutes les lignes de la table et ajoute la classe « oddrow » aux lignes impaires dans le tableau .

Si vous voulez toujours le oddrow/evenrow (qui IMHO ajoute simplement le code supplémentaire inutile), il n'y a pas beaucoup de changement:

function StripeRows() { 
    $("#mytable > tbody > tr").removeClass("oddrow evenrow") 
    .filter(":nth-child(odd)").addClass("oddrow") 
    .end().filter(":nth-child(even)").addClass("evenrow"); 
} 

Answer 3

Peut-être que vous devriez essayer cette première?

$(this).find("tr").removeClass();