Remplir une table onClick

Version imprimable

12/11/2015, 20h54
Kirsten

Remplir une table onClick

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
12/11/2015, 22h28
Auteur

Bonsoir,

te souviens-tu de la façon dont tu as procédé ? Peux-tu poster ton code ?
13/11/2015, 10h04
Kirsten

Aucune idée, j'ai rien écrit que le code de la table.
14/11/2015, 16h44
NoSmoking

Bonjour,

Citation:

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

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

• Les meilleurs cours et tutoriels pour apprendre le JavaScript.

Code:

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 ?

16/11/2015, 13h15
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.
16/11/2015, 14h46
melka one
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:

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

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

J'ai essayé ceci et ca marche pas

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

16/11/2015, 22h22
Auteur

Citation:

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 ?
16/11/2015, 22h35
Kirsten

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.
16/11/2015, 22h46
Auteur

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
17/11/2015, 18h45
NoSmoking

Je vais ajouter à ton trouble,

Citation:

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 ;)
17/11/2015, 22h40
Kirsten

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

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.
18/11/2015, 07h50
Kirsten

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

Le code enfin

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