Comment définir la classe de ligne d'une table en fonction du contenu de la cellule à l'aide de jQuery?

Question

J'ai le tableau suivant:

<table class="grid"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Status</th> 
     <tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Project 1</td> 
      <td>Closed</td> 
     <tr> 
     <tr> 
      <td>Project 2</td> 
      <td>Open</td> 
     <tr> 
     <tr> 
      <td>Project 3</td> 
      <td>Closed</td> 
     <tr> 
    </tbody> 
</table> 

Je suis en train de déplacer une partie de mon code d'interface utilisateur que je faisais dans le code-behind à jQuery. Je voudrais changer la classe de l'élément TR chaque fois que la colonne Status (Column 2) a la valeur Open.

Quelle serait la meilleure approche pour faire cela avec jQuery?

Answer 1

$('tbody > tr', 'table.grid').filter(function() { 
    return $(this).children('td').eq(1).text() == 'Open'; 
}).addClass('open_tr'); 

Qu'est-ce qu'il fait:

Il sélectionne tous les éléments à l'intérieur du <tr><tbody> du contexte table.grid. La fonction de filtre vous permet de filtrer les éléments en fonction de ce que vous renvoyez, soit true à keep ou false à rejeter. Donc, à l'intérieur du filtre, nous obtenons tous les enfants du tr, obtenons le 2e <td>, et retournons si le texte est égal à 'Ouvrir' - si c'est le cas, il retournera vrai, et nous pourrions garder le parent <tr> dans le sélecteur. Tout ce qui reste serait alors <tr> avec le statut Open, donc nous pouvons ajouter une classe pour les marquer comme tels.

Answer 2

Je n'écris pas de code parce que vous pouvez réutiliser certains des scripts jQuery qui vous permettent de générer des couleurs alternatives pour les lignes de table - avec une petite modification.

Fondamentalement, la charge de la page (en jQuery - sur le document prêt)

1. obtenir une référence aux lignes de la table.
2. parcourir les lignes en vérifiant la valeur des colonnes particulières.
3. S'il correspond à vos besoins, changez la couleur de la rangée.