Mise en forme conditionnelle ligne de tableau

Bonjour,

Je ne maitrise pas javascript et j'essaye de trouver une solution pour faire une mise en forme conditionnelle d'une ligne de mon tableau. J'ai commencé à lire mais j'ai du mal à savoir comment démarrer le script.

J'ai utilisé CSS pour définir le style

Code:

---

1 2 3

.directoryRow{ color : rgb(204, 51, 153); font-weight: bold;

---

que j'applique pour l'instant sur toutes les lignes.

J'ai donc lu qu'il faut utiliser javascript pour mettre les conditions.
En quelques mots je voudrait utiliser la condition if sur ma ligne
Et si le nom est Manche de Coupe de France mettre toute la ligne avec mon style CSS.

J'ai essayé cela mais sans succès. Je pense qu'il y a des erreurs de débutant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type"text/javascript"> function colorLineCdf() { if(document.directoryColType-competition.value == "Manche de Coupe de France") { tr .directoryRow{ color : rgb(204, 51, 153); font-weight: bold; } } }   </script>

---

Peut être plus facile si je met le lien de la page : https://champfrance.soinsenergie.fr/...u-liste-compet

Merci d'avance en espérant avoir été clair.

Salut,

tu as une page bien compliquée... qui ne facilite pas la maintenance;

Bref, si tu veux colorer une ligne contenant un texte donné, le principe est:

Code:

---

1 2 3 4

// tu appelles la collection des lignes de ta table; const lignes=document.getElementById("table").querySelectorAll("tr"); // tu colores celle(s) qui contien(nen)t le texte voulu en rouge; lignes.forEach(v=>{if(v.textContent.search("Manche de Coupe de France")!=-1){v.style.backgroundColor="red"}})

---

Oui, il s'agit d'un affichage de formulaire d'une extension que j'essaye d'adapter à mes besoins avec de maigres connaissances, et même plutôt débutant.
Je l'ai mis comme cela mais cela ne fonctionne pas.
La variable document ne doit pas être la bonne, j'étais parti d'un exemple. Elle correspond au nom de mon formulaire peut être ?

Code:

---

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript"> function colorLineCdf() { // tu appelles la collection des lignes de ta table; const lignes=document.getElementById("table").querySelectorAll("tr"); // tu colores celle(s) qui contien(nen)t le texte voulu en rouge; lignes.forEach(v=>{if(v.textContent.search("Manche de Coupe de France")!=-1){v.style.backgroundColor="red"}}) } </script>

---

"table" est à remplacer par le vrai id de ta table;

Et puis appelle ta fonction si tu veux qu'elle ... fonctionne;
colorLineCdf()

Merci de toutes ces infos. Je commence à comprendre le fonctionnement de javascript en lisant en même temps tout ce qui se trouve sur ce site.

Effectivement maintenant j'ai compris qu'il faut appelé les fonctions.

Vous allez me trouver un peu mauvais mais je n'arrive pas à l'appeler, il y a une erreur de chargement.
Alors ma question est : Faut il l'intégrer au template qui affiche mon tableau ? Et donc la lancer dans le template en intégrant son appel ?

J'ai deux erreurs qui apparaissent :

Citation:

---

Échec du chargement pour l’élément <script> dont la source est «*https://champfrance.soinsenergie.fr/templates/visu_formulaire_competitions/js/template.js*».

---

Et celle ci qui semble plus un soucis de la fonctionelle même :

Citation:

---

TypeError: document.getElementById(...) is null

colorLineCdf https://champfrance.soinsenergie.fr/index.php/competition/test/visu-liste-compet:216
<anonyme> https://champfrance.soinsenergie.fr/index.php/competition/test/visu-liste-compet:278

---

Place ces lignes où tu veux entre 2 balises script et en remplaçant "table" par l'identifiant de ton tableau;

Code:

---

1 2 3 4 5

window.addEventListener("load",function(){ const lignes=document.getElementById("table").querySelectorAll("tr"); lignes.forEach(function(v){if(v.textContent.search("Manche de Coupe de France")!=-1){v.style.backgroundColor="red"}}) },false)

---

Bonjour,
j'utiliserais de préférence .indexOf() à .search() qui travail plutôt avec des regExp, mais bon le résultat sera le même !

Quant à la validation de la page, il y a effectivement pas mal de chose à dire :aie:.

Je vais regarder pour débugger. Ça me fera de l'apprentissage et je comprendrai ce qui n'est pas correct.
En tout cas merci de votre patience

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> function colorLineCdf() { window.addEventListener("load",function() { // tu appelles la collection des lignes de ta table;   const lignes=document.getElementById("table table-condensed table-striped category directoryTable").querySelectorAll("tr");   // tu colores celle(s) qui contien(nen)t le texte voulu en rouge;   lignes.forEach(function(v){if(v.textContent.search("Manche de Coupe de France")!=-1){v.style.backgroundColor="red"}}) },false) } </script>

---

Cela avance, je n'ai plus l'erreur de chargement du script.
J'ai trouvé le nom de la table
Pièce jointe 539223

Mais je me retrouve avec deux erreurs :
TypeError: document.querySelector(...) is null
et
TypeError: document.getElementById(...) is null

Pourtant j'ai bien au moins une fois Manche de coupe de France présent

Marc G.

Eh non... Tu n'as pas trouvé le nom de la table! juste sa classe css;

Effectivement il ne faut pas confondre class et id, dans ton cas comme tu n'as qu'une <table> dans ta page tu peux faire directement un

Code:

---

const lignes=document.querySelectorAll("tr");

---

Autre remarque, pourquoi mettre ton window.addEventListener("load",function() dans une fonction ?

De plus, comme tu utilises également jQuery, tu devrais essayer de tirer avantage de ses fonctionnalités.

Bon,

J'ai corrigé.
Il faut donc le sortir de la fonction ?

Code:

---

window.addEventListener("load",function()

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> function colorLineCdf() { window.addEventListener("load",function() { // tu appelles la collection des lignes de ta table;   const lignes=document.querySelectorAll("tr");   // tu colores celle(s) qui contien(nen)t le texte voulu en rouge;   lignes.forEach(function(v){if(v.textContent.search("Manche de Coupe de France")!=-1){v.style.backgroundColor="red"}}) },false) } </script>

---

J'ai trouvé l'erreur, j'ai mis une majuscule à background.....

Enlève cette fonction colorLine qui n'a rien à faire là;

C'est fait.
En tout cas grand merci pour votre aide. Et je vais essayé d'épurer le ode, même si j'ai l'impression que pas mal de choses sont liées à l'extension Rsform.