Mise en oeuvre onClick sur TABLE

**GeBen** · 15/06/2017, 17h49

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

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

**badaze** · 15/06/2017, 19h01

Essaie ça.

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

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

**orphen** · 15/06/2017, 19h11

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

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

**NoSmoking** · 15/06/2017, 20h49

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

**GeBen** · 16/06/2017, 15h20

Merci NoSmoking
Je vais voir ça

**GeBen** · 16/06/2017, 15h19

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

**GeBen** · 16/06/2017, 16h23

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

**GeBen** · 16/06/2017, 16h31

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

Code html :

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

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

**badaze** · 17/06/2017, 11h01

Non. Je n'utilise pas jQuery.

**GeBen** · 17/06/2017, 12h31

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

**badaze** · 17/06/2017, 23h42

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

Mise en oeuvre onClick sur TABLE

JavaScript

Vue hybride

Discussions similaires

Partager

Partager