Discussion :

[moimp]

Bonjour � tous,

J'ai un tableau qui contient une s�rie d'images identiques sauf la couleur. J'ai 3 couleurs possibles 0, 1 et 2. Le but de mon script est qu'� chaque clic, je change de couleur.
Mon script semble fonctionner, mais j'ai des doutes sur la fiabilit� de la ligne 19.

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
16
17
18
19
20
 
var tbody = document.querySelector('#tbody');
 
function setIndex(index) {
	index ++;
	index = index >2 ? 0: index;
	return index;
}
 
tbody.addEventListener('click', function(e) {
	let img = document.querySelector('#'+e.target.id);
	let src = e.target.src;
	let ext = '.gif'; // voir extension qui va être changée en png
	let pos = src.lastIndexOf(ext);
	pos --;
	index = src.substr(pos, 1);
	index = setIndex(index);
	let newSrc = dirImg+index+ext; // dirImg est défini dans le code php
	e.target.src = newSrc;
}, false);

[danielhagnoul]

Normalement, l'�l�ment (tag) "tbody" repr�sente le corps d'une table. Mais dans votre code c'est un ID : document.querySelector('#tbody') !

e.target.src est bon uniquement si l'ID "#tbody" d�signe une image.

Sans vos codes (CSS, HTML, JS) difficiles d'en dire plus et de tester.

[moimp]

tbody est l'id d'une balise tbody, laquelle est parente de lignes et de cellules qui contiennent chacune une image. Voici un extrait du code source de mon tableau (g�n�r� en php). Dans ce tableau les deux derni�res colonnes sont appel�es � dispara�tre pour �tre remplac�es par le script en cours d'�criture. Le code marche. La question est de savoir s'il est fiable � 100%.

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="users">
	<caption>Tableau des droits utilisateurs par groupes</caption>
	<thead>
		<tr>
			<th rowspan="2" colspan="3"></th>
			<th colspan="19">Droits d'accès</th>
			<th rowspan="2" colspan="2" class="thGrpAction">Actions</th>
		</tr>
		<tr>
			<th colspan="2" class="thGrpOnglets">sur les réglages</th>
			<th colspan="12" class="thGrpOnglets">sur le fichier</th>
			<th colspan="5" class="thGrpOnglets">sur export et impressions</th>
		</tr>
		<tr><th><p>Groupes</p></th><th><p>Type d'accès</p></th><th><p>Mise à jour</p></th><th><p>Autoris. masquage</p></th><th><p>Badges/Etiquettes</p></th><th><p>Création personnel</p></th><th><p>Modif. personnel</p></th><th><p>Suppression personnel</p></th><th><p>Création activités</p></th><th><p>Modif. activités</p></th><th><p>Suppression activités</p></th><th><p>Création compétences</p></th><th><p>Modif. compétences</p></th><th><p>Suppression compétences</p></th><th><p>Création groupes</p></th><th><p>Modif. groupes</p></th><th><p>Suppression groupes</p></th><th><p>Messagerie</p></th><th><p>Etiquettes std</p></th><th><p>Badges</p></th><th><p>Export VCF</p></th><th><p>Export CSV</p></th><th><p>Edition ligne</p></th><th><p>Suppression ligne</p></th></tr>	</thead>
	<tbody id="tbody">
		<tr class='red'><td>Admin. site</td><td>Webmestre</td><td>12.05.2017</td><td><img id='grp6col0' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col1' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col2' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col3' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col4' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col5' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col6' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col7' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col8' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col9' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col10' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col11' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col12' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col13' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col14' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col15' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col16' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col17' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp6col18' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td></td><td></td></tr><tr><td>Conseil d'administration</td><td>Spécial démo</td><td>12.05.2017</td><td><img id='grp2col0' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col1' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col2' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col3' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col4' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col5' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col6' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col7' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col8' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col9' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col10' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col11' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col12' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col13' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col14' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col15' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col16' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col17' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><img id='grp2col18' src='_images/right2.gif' alt='button' style='width:15px;' /></td><td><a href='setRights.php?edit=2' title='Cliquez ici pour modifier cette ligne'><img src='_images/edit.png' alt='change' /></a></td><td><a href='setRights.php?del=2' title='Cliquez ici pour supprimer cette ligne'><img src='_images/del.png' alt='delete' /></a></td></tr><tr><td>Rhône-Alpes</td><td>Utilisateur</td><td>12.05.2017</td><td><img id='grp1col0' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col1' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col2' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col3' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col4' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col5' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col6' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col7' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col8' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col9' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col10' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col11' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col12' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col13' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col14' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col15' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col16' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col17' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp1col18' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><a href='setRights.php?edit=1' title='Cliquez ici pour modifier cette ligne'><img src='_images/edit.png' alt='change' /></a></td><td><a href='setRights.php?del=1' title='Cliquez ici pour supprimer cette ligne'><img src='_images/del.png' alt='delete' /></a></td></tr><tr><td>International</td><td>Utilisateur</td><td>12.05.2017</td><td><img id='grp3col0' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col1' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col2' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col3' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col4' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col5' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col6' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col7' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col8' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col9' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col10' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col11' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col12' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col13' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col14' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col15' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col16' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col17' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp3col18' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><a href='setRights.php?edit=3' title='Cliquez ici pour modifier cette ligne'><img src='_images/edit.png' alt='change' /></a></td><td><a href='setRights.php?del=3' title='Cliquez ici pour supprimer cette ligne'><img src='_images/del.png' alt='delete' /></a></td></tr><tr><td>Régions</td><td>Utilisateur</td><td>12.05.2017</td><td><img id='grp4col0' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col1' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col2' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col3' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col4' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col5' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col6' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col7' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col8' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col9' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col10' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col11' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col12' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col13' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col14' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col15' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col16' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col17' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp4col18' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><a href='setRights.php?edit=4' title='Cliquez ici pour modifier cette ligne'><img src='_images/edit.png' alt='change' /></a></td><td><a href='setRights.php?del=4' title='Cliquez ici pour supprimer cette ligne'><img src='_images/del.png' alt='delete' /></a></td></tr><tr><td>Local</td><td>Utilisateur</td><td>12.05.2017</td><td><img id='grp5col0' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col1' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col2' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col3' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col4' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col5' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col6' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col7' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col8' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col9' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col10' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col11' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col12' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col13' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col14' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col15' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col16' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col17' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><img id='grp5col18' src='_images/right0.gif' alt='button' style='width:15px;' /></td><td><a href='setRights.php?edit=5' title='Cliquez ici pour modifier cette ligne'><img src='_images/edit.png' alt='change' /></a></td><td><a href='setRights.php?del=5' title='Cliquez ici pour supprimer cette ligne'><img src='_images/del.png' alt='delete' /></a></td></tr>	</tbody>
</table>

[danielhagnoul]

Solution :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const
  tbody = document.querySelector( "#tbody" );
 
function setIndex( index ){
  return ( ++index > 2 ? 0: index );
}
 
tbody.addEventListener( "click", ev => {
 
  // debug, console touche F12
  //console.log( "ev.currentTarget = ", ev.currentTarget, "ev.target = ", ev.target, "ev.target.nodeName = ", ev.target.nodeName );
 
  if ( ev.target.nodeName === "IMG" ){
    let
      src = ev.target.src,
      ext = ".gif",
      pos = src.lastIndexOf( ext ),
      index = setIndex( src.substr( --pos, 1 ) ),
      newSrc = dirImg + index + ext; // dirImg est défini dans le code php
 
      //console.log( "src = ", src, "pos = ", pos, "index = ", index );
 
    ev.target.src = newSrc;
  }
}, false);

[moimp]

Merci. Je n'ai pas fini d'apprendre...