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)