Remplir une table onClick

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

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, 22h28

Bonsoir,

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

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

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

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

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, 20h45

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, 13h15

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, 14h46

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, 20h18

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, 22h22

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, 22h35

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, 22h46

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, 18h45

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, 22h40

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, 22h52

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, 07h50

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

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

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