Mise en oeuvre onClick sur TABLE

Version imprimable

Bonjour,
J'ai le code suivant pour un tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <link rel="stylesheet" href="Grilles2.css" media="all" type="text/css" /> </head> <body> <TABLE id="Table1"> <TR> <TD id="C01">1</TD> <TD id="C02">2</TD> <TD id="C03">3</TD> </TR> <TR> <TD id="C11">4</TD> <TD id="C12">5</TD> <TD id="C13">6</TD> </TR> </TABLE> </body> </html>
J'aimerai de l'aide pour un script JavaScript permettant :
• en cliquant une première fois dans une cellule, d'afficher dans cette cellule "Vrai"
• en cliquant une deuxième fois dans cette cellule, d'afficher dans cette cellule "Faux"
• en cliquant une troisième fois dans cette même cellule, de vider le contenu de la cellule

Merci d'avance

Essaie ça.

Cerise sur le gâteau si tu cliques sur la cellule vide ça remet la valeur d'origine.

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
 <html  xml:lang="fr" lang="fr">
 <head>
 <link rel="stylesheet" href="Grilles2.css" media="all" type="text/css" />
 <script>
 function change(unId) {
 if (! unId.getAttribute('mem')) {
  unId.setAttribute('mem',unId.innerHTML);
  unId.innerHTML = 'vrai';
 } else {
  if (unId.innerHTML == 'vrai') {
   unId.innerHTML = 'faux';
  } else {
   if (unId.innerHTML == 'faux') {
    unId.innerHTML = '';
   } else {
    if (unId.innerHTML == '') {
    
     unId.innerHTML = unId.getAttribute('mem');
     unId.removeAttribute('mem');
    }
   }
  }
 
 }
 }
 </script>
 </head>
 <body>
 <TABLE id="Table1" border='1'>
 <TR>
 <TD >Colonne 1</TD>
 <TD >Colonne 2</TD>
 <TD >Colonne 3</TD>
 </TR> 
 <TR>
 <TD id="C01" onclick="change(this)">1</TD>
 <TD id="C02" onclick="change(this)">2</TD>
 <TD id="C03" onclick="change(this)">3</TD>
 </TR>
 <TR>
 <TD id="C11" onclick="change(this)">4</TD>
 <TD id="C12" onclick="change(this)">5</TD>
 <TD id="C13" onclick="change(this)">6</TD>
 </TR>
 </TABLE>
 </body>
 </html>

Voici une autre façon de faire avec du Jquery et un compteur

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title></title>
 
  </head>
 
<body>
	<TABLE id="Table1">
		<TR>
			<TD id="C01">1</TD>
			<TD id="C02">2</TD>
			<TD id="C03">3</TD>
		</TR>
	<TR>
		<TD id="C11">4</TD>
		<TD id="C12">5</TD>
		<TD id="C13">6</TD>
	</TR>
	</TABLE>
 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
 
    <script>
        $(document).ready(function(){
                $('#Table1 td').each(function(){
                        var count = 0,
                                $that = $(this);
                        $that.on('click', function(){
                                if(count === 0){
                                        $that.html('Vrai');
                                        count++;
                                }else if (count === 1){
                                        $that.html('Faux');
                                        count++;
                                }else{
                                        $that.html('');
                                }
                        });
                });
        });
 
  </script>
 
</body>
</html>

Sylvain

15/06/2017, 19h49
NoSmoking

Bonjour,
c'est typiquement un cas où l'utilisation de la délégation d'événement prend tout son sens.

Comprendre la délégation...
16/06/2017, 14h19
GeBen

Merci beaucoup orphen
Cela correspond bien à ma demande et fonctionne
Un petit souci toutefois (si ce n'est pas abuser) :
lorsque par erreur je clic plus de 3 fois sur une cellule je ne peux plus y revenir pour la remplir
En espérant une solution, j'attends pour classer en résolu
Merci encore
16/06/2017, 14h20
GeBen

Merci NoSmoking
Je vais voir ça
16/06/2017, 15h23
GeBen

Pour orphen
Autant pour moi il suffit d'ajouter count = 0; à la fin du second else
Je marque le sujet comme résolu
Merci encore
Bon Week End
16/06/2017, 15h31
GeBen

Merci badaze
Cela ne fonctionne qu'en ajoutant avant la ligne 4 :

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
17/06/2017, 10h01
badaze

Non. Je n'utilise pas jQuery.
17/06/2017, 11h31
GeBen

Pour badaze
Bien mais j'aimerai comprendre pourquoi, chez moi cela ne fonctionne pas sans cette modification.
Autres choses :
comment faire pour que cela ne fonctionne pas sur les titres de colonne
ni sur certaines cellules (certains id=)
Merci de ton attention

Pour les titre des colonnes, tu peux utiliser la balise th au lieu de td.

Pour l'exclusion ou plutôt la sélection tu peux faire comme suit :

Reprise du code fourni par @orphen. Le click ne fonctionne que sur les cellules dont l'id commence par C.

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </head>
 
<body>
 <TABLE id="Table1">
 <TR>
  <TD id="C01">1</TD>
  <TD id="C02">2</TD>
  <TD id="C03">3</TD>
 </TR>
 <TR>
  <TD id="C11">4</TD>
  <TD id="C12">5</TD>
  <TD id="C13">6</TD>
 </TR>
 <TR>
  <TD id="D11">7</TD>
  <TD id="D12">8</TD>
  <TD id="D13">9</TD>
 </TR> 
 </TABLE>
 
    <script>
        $(document).ready(function(){
                $('#Table1 td[id^="C"]').each(function(){
                        var count = 0,
                                $that = $(this);
                        $that.on('click', function(){
                                if(count === 0){
                                        $that.html('Vrai');
                                        count++;
                                }else if (count === 1){
                                        $that.html('Faux');
                                        count++;
                                }else{
                                        $that.html('');
                                }
                        });
                });
        });
 
  </script>
 
</body>
</html>

18/06/2017, 09h27
GeBen

Exactement ce que je voulais obtenir

Pour ceux qui auraient le même problème :
dans le dernier code de badaze, remplacer la ligne 7 par

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Je ne sais toujours pas pourquoi (ne me laissez pas mourir idiot), mais chez moi cela permet d'obtenir le résultat espéré

Mille merci à orphen et badaze
18/06/2017, 10h56
badaze

J'ai compris. C'est le forum qui réécrit les url.