Comment récuper une valeur dans un tableau?

Version imprimable

30/06/2010, 16h09
cyril

Comment récuper une valeur dans un tableau?

Bonjour,

J'aimerai récupérer une valeur caché dans une ligne de mon tableau sur évènement onclik de la ligne.
1°) Comment cacher cette valeur qui sera unique pour chaque ligne de mon tableau ?
2°) Comment récupérer cette valeur ?

merci d'avance de vos réponse

Cyril
30/06/2010, 16h30
devyan

Bonjour,

Citation:

Envoyé par cyril

2°) Comment récupérer cette valeur ?

Ça dépends complètement de ce que tu veux en faire...
Où veux-tu récupérer cette valeur ?

Citation:

Envoyé par cyril

1°) Comment cacher cette valeur qui sera unique pour chaque ligne de mon tableau ?

Suivant la réponse au 2° la solution peut varier...

devyan
30/06/2010, 16h47
cyril

merci

J'ai réussi à récupérer la valeur sur le onclik de la ligne en utilisant

Code:

window.document.getElementById('MaLigne').id

J'ai initialise la valeur de l' ID de la ligne avec ma valeur que je voudrai cacher
mais je ne sais pas si c'est le plus propre comme méthode.

Sur le clique, je veux simplement récupérer cette valeur cacher et la faire afficher dans un message d'alerte.
30/06/2010, 18h04
devyan

Citation:

Envoyé par cyril

merci

J'ai réussi à récupérer la valeur sur le onclik de la ligne en utilisant
window.document.getElementById('MaLigne').id

J'ai initialise la valeur de l' ID de la ligne avec ma valeur que je voudrai cacher
mais je ne sais pas si c'est le plus propre comme méthode.

Sur le clique, je veux simplement récupérer cette valeur cacher et la faire afficher dans un message d'alerte.

Attention : un ID doit être unique dans la totalité de la page et ne doit pas commencer par un chiffre.

8O window.document.getElementById('MaLigne').id 8O
Si je comprends bien cette ligne de code, tu as besoin de connaître ton ID afin de récupérer ton ID :aie:

devyan
30/06/2010, 18h21
cyril

J'ai besoin de récupérer une valeur dans ma ligne qui n'est pas saisie.
et je ne veux pas qu'elle apparaisse dans mon tableau.
Donc j'ai pense à la stocker dans l ID de la ligne.
Mais je pense que ce n'est pas très propre comme code.

Je suis à la recherche d'une autre méthode .
Toutes les idées sont les bienvenues
30/06/2010, 20h08
Bovino

Code:

<HTMLElement id="toto" onclick="alert(this.id)">Info cachée</HTMLElement>

HTMLElement correspondant à une balise HTML valide...

Mais bon, comme déjà dit par devyan, étant donné ce que tu nous fournis comme explications sur ce que tu souhaites faire, c'est quasiment impossible de te donner une réponse précise... sauf que

Code:

window.document.getElementById('MaLigne').id

au-delà du coté loufoque de vouloir récupérer l'id d'un élément que l'on a sélectionné par son id, implique que tu connais déjà la valeur à rechercher... :koi:

Tu peux simplement placer un <input type="hidden" value="valeur cachée"/> dans l'un des td de chaque ligne du tableau.

Ensuite pour récupérer la valeur tu peux faire quelque chose du genre ...

Code:

1
2
3
function tr_click(le_tr) {
  alert(le_tr.cells[0].getElementsByTagName('input')[0].value);
}

Code:

1
2
3
4
5
<table>
  <tr onclick="tr_click(this)"><td><input type="hidden" value="la valeur cachée de la ligne 1"/>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr>
  <tr onclick="tr_click(this)"><td><input type="hidden" value="la valeur cachée de la ligne 2"/>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr>
  <tr onclick="tr_click(this)"><td><input type="hidden" value="la valeur cachée de la ligne 3"/>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr>
</table>

devyan

pas mieux dev,
Un alternative serait de mettre un attribut perso sir le tr

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function tr_click(le_tr) {
  alert(le_tr.getAttribute('myvalue'));
}
 
</script>
</head>
 
<body>
<table>
  <tr onclick="tr_click(this)" myvalue="132"><td>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr>
  <tr onclick="tr_click(this)" myvalue="coucou"><td>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr>
  <tr onclick="tr_click(this)" myvalue="je suis caché"><td>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr>
</table>

mais ça va pas plaire au validateur w3c.
après on peut les attribuer dynamiquement ou avoir un array :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
function tr_click(le_tr) {
tabCache=[132,'coucou','je suis caché']
alert(tabCache[le_tr]);
}
 
</script>
</head>
 
<body>
<table>
  <tr onclick="tr_click(0)" ><td>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr>
  <tr onclick="tr_click(1)" ><td>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr>
  <tr onclick="tr_click(2)"><td>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr><
</table>
</body>

:mouarf: Ton code m'a fait penser à une "solution" encore plus "simple" :mouarf:
Je reprends ton dernier code en supprimant le tableau ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Vide mais c'est normal vu qu'il n'y avait plus que alert(le_tr); dans la fonction :D
</script>
</head>
 
<body>
<table>
  <tr onclick="alert(132)" ><td>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr>
  <tr onclick="alert('coucou')" ><td>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr>
  <tr onclick="alert('je suis caché')"><td>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr><
</table>
</body>

Cette fois je crois qu'on ne peut plus rien ôter :ccool:

devyan

01/07/2010, 10h45
cyril

merci de vos réponse et désolé de ne pas avoir été assez clair.
En tout cas vous avez compris.
J'ai utilisé la méthode devyan.
bonne journée
01/07/2010, 11h41
SpaceFrog

:mouarf: dev ... pour autant que tu n'aies pas à l'utiliser la valeur par ailleurs ;)
getElementByAlert.value n'existe pas :ptdr:
01/07/2010, 18h38
devyan

Citation:

Envoyé par SpaceFrog

:mouarf: dev ... pour autant que tu n'aies pas à l'utiliser la valeur par ailleurs ;)
getElementByAlert.value n'existe pas :ptdr:

??? je n'ai pas saisi :oops:
01/07/2010, 18h40
SpaceFrog

si tu as besoin de la valeur ailleurs dans ton script ...

Citation:
Envoyé par SpaceFrog
pas mieux dev,
Un alternative serait de mettre un attribut perso sir le tr
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function tr_click(le_tr) { alert(le_tr.getAttribute('myvalue')); } </script> </head> <body> <table> <tr onclick="tr_click(this)" myvalue="132"><td>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr> <tr onclick="tr_click(this)" myvalue="coucou"><td>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr> <tr onclick="tr_click(this)" myvalue="je suis caché"><td>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr> </table>
mais ça va pas plaire au validateur w3c.
...[/code]
en fait il suffit de se conformer à la norme pour faire ça
pour ajouter un attribut perso à un tag il suffit de le définir dans un namespace.

ensuite on peu attacher une méthode directement à un objet du DOM il n'est pas nécessaire de définir une fonction dans la page qui va traiter le click

la méthode étant un membre de l'élément DOM on accède à celui-ci directement par this ce qui est très rapide et simple.

le plus simple pour le comprendre c'est de faire

Code:

<a id="45" onclick="alert(this.id); return false">Cliquer ici</a>

cela revient à créer un méthode dans l'objet DOM
Code:

1 2 3 document.getElementById('45').onclick=function () { alert(this.id); return false }
on peu attacher les méthode que l'on veut c'est prévu dans la norme
par exemple sur un objet formulaire on peu créer une méthode de validation verifForm qu'on appellera à la demande sur un click de bouton ou dans l'évènement onsubmit.

l'avantage de faire porter les méthode directement au objet concerné c'est qu'on a directement accès aux membre de l'objet et de plus on n'a pas de conflit de nom deux formulaire dans la page peuvent tous les deux avoir leur propre méthode de vérification.

il reste donc à associer la méthode à l'objet du DOM
le plus simple et de le faire au load
cela donne
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 <!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" xmlns:x="urn:extended.html.urn"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>test avec name space</title> <script type="text/javascript" language="JavaScript" charset="iso-8859-1"> function load () { contentTable=document.getElementById('content_table'); clickHandler = function() { alert(this.getAttribute('x:myvalue')); } for (var i=0;i<=contentTable.rows.length -1 ;i++) { contentTable.rows[i].onclick=clickHandler } } </script> </head> <body onload='load()'> <table> <tbody id="content_table"> <tr x:myvalue="132"><td>Aenean in velit nisi</td><td>Donec scelerisque odio</td><td>Fusce consectetur pellentesque</td></tr> <tr x:myvalue="coucou"><td>Quisque quis libero</td><td>Vivamus eu odio tortor</td><td>Mauris tristique posuere auctor</td></tr> <tr x:myvalue="je suis caché"><td>Etiam ut ipsum sit amet</td><td>Nam leo leo</td><td>Quisque condimentum arcu</td></tr> <tbody> </table> </body> </html>
A+JYT