Pourquoi la couleur de l'arrière-plan ne change-t-elle pas ?

Question

J'ai un problème pour mettre en évidence certaines lignes dans un tableau généré par Apex.

Grâce à des actions dynamiques et à jQuery, j'ai pu mettre en évidence des colonnes uniques.

jQuery :

$('tr td[headers="IDZ"]').each(function(){
  if(parseInt($(this).html()) == 12){
    $(this).attr('style','background-color:red');
  }
});

Résultat en html :

<td align="right" headers="IDZ" style="background-color:red">12</td>

Cela fonctionne bien, la colonne où IDZ == 12 est maintenant rouge.

Mais je veux mettre en évidence la ligne entière, alors je me suis dit qu'il fallait récupérer le nœud parent. <tr> et ajouter un peu de "style".

jQuery :

$('tr td[headers="IDZ"]').each(function(){
  if(parseInt($(this).html()) == 12){
    $(this).parent().attr('style','background-color:red');
  }
});

et le résultat :

<tr class="even" style="background-color:red">

Row n'a pas changé leur couleur de fond et je ne sais pas pourquoi. Testé avec Firefox et Chrome.

Je suis reconnaissant pour tout conseil ou solution.

Mario

Answer 1

Définir un arrière-plan pour un <tr> ne fonctionne pas toujours de manière fiable, il est préférable de le définir pour tous les <td> ou <th>enfants.

Un bon moyen de le faire serait de remplacer vos

$(this).parent().attr('style','background-color:red');

avec

$(this).parent().addClass('highlightit');

puis ajoutez le css

tr.highlightit td { background-color: red; }

qui fera que tous les éléments de données du tableau sous cette ligne du tableau auront un fond rouge.

Answer 2

Essayez ce code JS à la place ( jsFiddle ). Cela a fonctionné pour moi

$('tr td[headers="IDZ"]').each(function(){
  if(parseInt($(this).html()) == 12){
    $(this).parent().css('background-color','red');
  }
});​

Answer 3

Vous pouvez également utiliser .closest('tr') et j'ai utilisé text au lieu de html

$('tr td[headers="IDZ"]').each(function(){
    if(parseInt($(this).text()) == 12){
        $(this).closest('tr').attr('style','background-color:red');
    }
});​

DEMO .