jQuery changement de cellule de la table de couleur de texte basé sur le texte

J'ai une table qui a des colonnes de données qui contiennent de l'état. Deux exemples de statuts serait "Rejeté" et "Payé"

Ce que je suis désireux de faire est de changé la couleur du texte de la "Rejeté" le rouge et la couleur de la "Payé" au vert.

Pour les cellules qui ont ce statut, j'ai ajouté un classs à la td comme:

<td class="status">
    @Html.DisplayFor(modelItem => item.Status)
</td>

Afin que je puisse l'identifier facilement.

J'ai trouvé que je pouvais changer la couleur de tous les statuts de Rouge à l'aide de:

$('.status').css("color", "red");

Aussi, je pourrais obtenir la valeur de la première par:

alert($('.status').html());

Cependant, je ne suis pas sûr comment définir un état de couleur en fonction de son texte. c'est à dire pour tous "Reçu" définit la couleur rouge et pour tous "Payé" définir la couleur au vert.

Quelqu'un peut-il m'éclairer sur le comment faire?

Suis-je même à la suite de la bonne approche à l'aide de jQuery ou est-il une meilleure css?

À moins que la valeur de cette colonne est modifiée côté client. Je vous suggère de réglage de la classe lorsque la page est tirée dans le côté serveur de script (PHP,ASP.NET, etc)
Il peut changer de côté client via ajax donc peut-être que cela ne fonctionne pas

OriginalL'auteur AnonyMouse | 2011-11-02

Cela fonctionne:

$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');

http://jsfiddle.net/MMEhc/

OriginalL'auteur Clive

2

Aussi, je pourrais obtenir la valeur de la première par...

Avec ce sélecteur vous obtenez une collection. Et vous ne .html() sur le premier élément de la collection.

Vous pourriez faire une boucle par tous les status cellules pour vérifier l'état et le changement de couleur.
```
$('.status').each(function() {
  //check text and do styling
});
```
Cependant, ce n'est pas privilégié (cause il n'est pas nécessaire). Et ça fait mal de performance.

Vous pouvez également utiliser jQuery .contains() ( http://api.jquery.com/contains-selector/ ).

N'est pas vraiment nécessaire. Et je ne pense pas la meilleure option performance sage.

Donc, la meilleure option (à mon humble avis) est de:

Pourquoi ne pas simplement ajouter deux classes supplémentaires pour les cellules: status-received et status-paid puisque vous connaissez déjà le statut de l'cellules pendant le rendu.

De sorte que vous pouvez faire:
```
$('.status-received').css("color", "red");
$('.status-paid').css("color", "red");
```
Ou drop jQuery entièrement (puisque nous n'avons pas besoin de plus (à moins que nous allons changer les cellules dynamiquement)) et un peu de style, les deux classes utilise CSS.

OriginalL'auteur PeeHaa
1

Si vous avez l'impression de la table à partir d'une base de données, il suffit d'attribuer une classe à l' td basé sur le résultat.

Ensuite affecter la couleur de fond de la classe.
```
td.paid {
 display:block;
background-color:red;

}

td.recieved {
 display:block;
background-color:green;
}
```
Pourquoi avez-vous besoin d'utiliser le javascript pour cela, en premier lieu?

Si je ne me trompe pas, le code ci-dessus est jQuery, donc n'oubliez pas d'ajouter la Lib si vous l'utiliser.

OriginalL'auteur mindmyweb
0

J'ai récemment eu à faire quelque chose comme cela. J'avais besoin de changer la couleur d'arrière-plan rouge (bien, rosé) lorsqu'une erreur s'est produite et le laisser blanc quand tout était bon. Voici mon code:
```
warning_color = "#ffffff";

if (error_happened)
    warning_color = "#ffaaaa";

$("#input_box").css('background-color', warning_color);
```
OriginalL'auteur rogerlsmith

$('td.status').each(function() {
  if ($(this).text() == 'Received') {
      $(this).style('color', 'red');
  } //similarly for other statuses
});

OriginalL'auteur Abdullah Jibaly

0
```
$('.status').addClass($(".status").html());
```
Alors vous pourriez avoir un .Paid classe et un .Received de classe et de définir le css dans ces classes respectivement. De cette façon, si vous avez toujours voulu changer le css plus tard, il est placé loin du javascript. Vous pouvez également utiliser ces classes dans d'autres endroits aussi bien en cas de besoin.

OriginalL'auteur Keith.Abramo

Vous devez vous connecter pour publier un commentaire.