Remplir une table onClick

**Kirsten** · 12/11/2015, 21h54

Salut

Voila aujourd'hui, j'avais un petit test javascript, la question demanda de contruire un table en HTML (pas de problèmes) et lorsque je clique sur une cellule un prompt s'affiche me demandant d'entrer un texte ou une valeur, et cette valeur sera transmise à la cellule en question.

Je me suis complètement plantée, je navais aucune idée où et comment commencer et j'ai probablement eu un zéro, mais il faut apprendre pour les tests prochains si une situation sembalble se présenterait.

Merci si quelqu'un peut m'aider

**Auteur** · 12/11/2015, 23h28

Bonsoir,

te souviens-tu de la façon dont tu as procédé ? Peux-tu poster ton code ?

**Kirsten** · 13/11/2015, 11h04

Aucune idée, j'ai rien écrit que le code de la table.

**NoSmoking** · 14/11/2015, 17h44

Bonjour,

...j'ai rien écrit que le code de la table.

j'espère que tu ne te fous pas de nous sur ce coup

• Les meilleurs cours et tutoriels pour apprendre le JavaScript.

**Auteur** · 14/11/2015, 21h45

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td> cellule 1</td>
<td> cellule 2</td>
</tr>
<tr>
<td> cellule 3</td>
<td> cellule 4</td>
</tr>
</table>

voici une table. Comment détecterais-tu le clic sur une cellule ?

**Kirsten** · 16/11/2015, 14h15

Je dois ajouter <td onclick="nom_fonction()>
Je ne fous pas de vous, je suis vraiment débutante, et mon prof est plus rapide qu'une fusée, je ne comprends rien, j'essaie toujours.

**melka one** · 16/11/2015, 15h46

jour

dans ce qui t'est demandé tu doit travaillé avec l'objet "event" qui permet la gestion des evenement par le navigateur

tu doit complété l'appel a la fonction en ajoutant comme parametre le mot clee event

Code :

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

<td onclick="nom_fonction(event)">

ensuite tu recupere l'evenement transmis en parametre et tu utilise sa methode currentTarget qui te permet de recuperé l'element sur lequel tu a cliqué dans ton cas la cellule

tu fait un appel a prompt() qui va afficher une fenetre permettant de transmetre une valeur tu met une valeur tu clic sur ok et sa te renverra a la fonction

pour finir tu utilise la methode textContent en se référençant au td afin d’insérer la valeur dans le td

Code :

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

1
2
3
4
5
6
7
8
9
function nom_fonction(evt){
 
var le_td=evt.currentTarget;
 
var valeur=prompt("veuillez entré une valeur")
 
 le_td.textContent=valeur
 
}

ps: il exite aussi le paramètre this qui permet de referencé l'element sur lequel on clic

**Kirsten** · 16/11/2015, 21h18

J'ai essayé ceci et ca marche pas

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
<html>
<head>
<script >
function fun () {
var a = prompt ("");
 
document.getElementById("item1").innerHTML = a;
document.getElementById("item2").innerHTML = a;
 
}
 
</script>
 
 
</head>
<body>
<table border=1>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td id="item1" onclick="fun()"> &nbsp;</td>
<td id="price1" onclick="fun()">&nbsp;</td>
</tr>
<tr>
<td id="item2" onclick="fun()"> &nbsp;</td>
<td id="price2" onclick="fun()"> &nbsp;</td>
</tr>
<tr>
<td> Subtotal</td>
<td> &nbsp;</td>
</tr>
<tr>
<td>VAT(10%)</td>
<td> &nbsp;</td>
</tr>
<tr>
<td><b>Total</b></td>
<td> &nbsp;</td>
</tr>
 
 
</body>
</html>

**Auteur** · 16/11/2015, 23h22

Envoyé par Kirsten

Je dois ajouter <td onclick="nom_fonction()>
Je ne fous pas de vous, je suis vraiment débutante, et mon prof est plus rapide qu'une fusée, je ne comprends rien, j'essaie toujours.

tu as bien compris qu'il fallait utiliser le gestionnaire d'événements. Maintenant tu dois transmettre à la fonction l'objet qui a généré cet événement et à partir de là tu pourras effectivement remplir la cellule sélectionné avec le texte voulu.
Ma question est : quel est le mot-clef javascript qui permet de désigner l'objet ayant généré un événement ?

Qu'est-ce que tu n'as pas compris ?

**Kirsten** · 16/11/2015, 23h35

Désolé, aucune idée.

Si vous pouviez me renseigner sur un tutoriel, ce serait excellent, dans le cas échéant, merci, mais je n'ai pas votre niveau.

**Auteur** · 16/11/2015, 23h46

C'est pourtant la base. Si tu as eu des cours tu dois avoir vu cet opérateur.
https://developer.mozilla.org/fr/doc...%A9rateur_this

**NoSmoking** · 17/11/2015, 19h45

Je vais ajouter à ton trouble,

lorsque je clique sur une cellule un prompt s'affiche...

dans ce cas, et pour ne pas avoir à multiplier les ID ou autres fonctions "inline", il te faut mettre la surveillance du click sur la TABLE, cela s'appelle la délégation , et agir en conséquence

**Kirsten** · 17/11/2015, 23h40

Je dois peut être utiliser quelque chose du type document.getElementById("myTable").rows.namedItem("myRow").innerHTML, mais je vais attendre la correction du prof.

**NoSmoking** · 17/11/2015, 23h52

Je crois que tu lis trop W3schools sans chercher à vraiment comprendre, je te conseille de bien écouter ton prof

En attendant je te propose cette lecture : Comprendre la délégation d'événement en JavaScript, en plus c'est sur developpez.com et c'est en français...que du bonheur.

**Kirsten** · 18/11/2015, 08h50

Oui, c'est le seul site qu'on peut utiliser à l'examen.
Merci pour le lien.

**Kirsten** · 19/11/2015, 18h13

Le code enfin

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
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<html>
<head>
<script type="text/javaScript">
	function isNumeric(n) {
	  return !isNaN(parseFloat(n)) && isFinite(n);
	}
	function edit(cell) {
		value = prompt("","");
		cell.innerHTML = value;
		subtotals = document.getElementsByName("subs");
		sum = 0;
 
		for (i = 0; i < subtotals.length; i++) {
			if (isNumeric(subtotals[i].innerHTML)) {
				sum += parseFloat(subtotals[i].innerHTML);
			}
		}
 
		document.getElementById("subtotal").innerHTML = sum.toFixed(2);
		document.getElementById("vat").innerHTML = (sum * 0.1).toFixed(2);
		document.getElementById("total").innerHTML = (sum * 1.1).toFixed(2);
	}
 
</script>
</head>
 
<body>
<table border="1"/>
	<tr><th>Item</th><th>Price</th></tr>
	<tr><td onclick="edit(this);">&nbsp;</td><td name="subs" onclick="edit(this);">&nbsp;</td></tr>
	<tr><td onclick="edit(this);">&nbsp;</td><td name="subs" onclick="edit(this);">&nbsp;</td></tr>
	<tr><td align="right">Subtotal</td><td id="subtotal"></td></tr>
	<tr><td align="right">VAT(10%)</td><td id="vat"></td></tr>
	<tr><th align="right">Total</th><th id="total"></th></tr>
 
</body>
</html>

Remplir une table onClick

JavaScript

Discussions similaires

Partager

Partager