Accès éléments du tableau dans Jquery

I ont un certain nombre de lignes comme ceci:Accès éléments du tableau dans Jquery

<tr>   
    <TD class="Lo">90%</TD>       
    <TD class="Poor">80%</TD>     
    <TD class="Lo">89%</TD>      
    <TD class="Mid">85%</TD>       
    <TD class="Poor">85%</TD>      
    <TD class="Mid">85%</TD>       
    <TD class="Hi">85%</TD> 
</tr>

Maintenant, je veux accéder à tous les éléments de cette ligne et définir la couleur de cette ligne en fonction des valeurs:

Si 80% < valeur < = 85% couleurs jaune,
Si 90% < valeur < = rouge couleurs 95%,
Si la 95% < valeur < = 100% couleurs vert.

Comment faire cela en utilisant jQuery?

Source

2009-02-27 Anonymous

Il serait bon de fournir le code html avec

ainsi depuis la table peut avoir un identifiant qui peut être utilisé comme un sélecteur pour la mise en évidence destiné. –

Cela fait quelques jours, que diriez-vous de choisir l'une des réponses? –

Répondre

Essayez quelque chose comme ça

$("td").each(function() { 
    if ($(this).text().replace('%') <= 90) { 
    $(this).css('background','red'); 
    } else if ($(this).text().replace('%') <= 100) { 
    $(this).css('background','green'); 
    } 
    // repeat ... 
});

Source

2009-02-27 12:31:28

Cela le rendra toujours vert puisque toutes les valeurs sont inférieures à 100 –

Vous pouvez obtenir une bonne utilisation de faire quelques custom selectors pour cela.

Par exemple, voici un appelé « haut »:

jQuery.expr[':'].high = '(put your boolean logic here, inside quotes)';

Ensuite, une fois que vous avez vos filtres personnalisés, faire pour chacun:

$('td:high').css('color', 'green');

Source

2009-02-27 12:43:07

C'est une solution très élégante. :) – Helephant

Cela nécessite cependant une certaine logique sur les noms des classes d'éléments. –

@codemeit non, il ne dépend pas du tout de la classe. Le sélecteur peut simplement vérifier le contenu de l'étiquette, ou faire tout ce que vous êtes autorisé à faire en javascript. –

Voici une solution de travail et la mettre en évidence la logique effectuée du côté client.

Étant donné la table html avec id = "stats", ce qui signifie que les surbrillances seront appliquées au td de cette table.

<table id="stats"> 
    <tr> 
     <td>83%</td>           
     <td>96%</td> 
     <td>92%</td> 
    </tr> 
    <tr> 
     <td>100%</td>           
     <td>94%</td>         
     <td>85%</td>            
    </tr> 
</table>

Javascript avec JQuery pour effectuer les mises en évidence.

<script type="text/javascript"> 
    $(window).ready(function() { 
     // for each td element within elements whose id="stats" 
     $("#stats td").each(function() { 
      // current td element 
      var td = $(this); 
      // do it once only 
      var val = td.text().replace('%', ''); 

      td.css('background', val > 80 && val <= 85 ? 'yellow' 
            : val > 90 && val <= 95 ? 'red' 
            : val > 95 && val <= 100 ? 'green' 
            : 'black'); // black is default 
     }); 

    }); 
</script>

Source

2009-02-27 13:51:31

Questions connexes