Comment récuper une valeur dans un tableau?

**cyril** · 30/06/2010, 16h09

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

**devyan** · 30/06/2010, 16h30

Bonjour,

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 ?

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

**cyril** · 30/06/2010, 16h47

merci

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

Code :

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

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.

**devyan** · 30/06/2010, 18h04

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.

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

Si je comprends bien cette ligne de code, tu as besoin de connaître ton ID afin de récupérer ton ID

devyan

**cyril** · 30/06/2010, 18h21

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

**Bovino** · 30/06/2010, 20h08

Code html :

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

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

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

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

**devyan** · 30/06/2010, 22h13

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

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

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

Code html :

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

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

**SpaceFrog** · 01/07/2010, 08h37

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

Code :

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

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 :

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

**devyan** · 01/07/2010, 10h10

Ton code m'a fait penser à une "solution" encore plus "simple"

Je reprends ton dernier code en supprimant le tableau

Code :

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

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

devyan

**cyril** · 01/07/2010, 10h45

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

**SpaceFrog** · 01/07/2010, 11h41

dev ... pour autant que tu n'aies pas à l'utiliser la valeur par ailleurs

getElementByAlert.value n'existe pas

**devyan** · 01/07/2010, 18h38

Envoyé par SpaceFrog

dev ... pour autant que tu n'aies pas à l'utiliser la valeur par ailleurs

getElementByAlert.value n'existe pas

??? je n'ai pas saisi

**SpaceFrog** · 01/07/2010, 18h40

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

**sekaijin** · 02/07/2010, 17h54

Envoyé par SpaceFrog

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

Code :

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

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 :

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

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

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

Code :

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

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 :

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

Comment récuper une valeur dans un tableau?

JavaScript

Discussions similaires

Partager

Partager