Discussion :

[Marcopololo]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[javatwister]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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"}})

[Marcopololo]

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 JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[javatwister]

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

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

[Marcopololo]

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 :

É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 :

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

[javatwister]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[NoSmoking]

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 .

[Marcopololo]

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

[Marcopololo]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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


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.

[javatwister]

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Marcopololo]

Bon,

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

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

window.addEventListener("load",function()

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.....

[javatwister]

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

[Marcopololo]

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.