Récupérer une donnée non affichée à l'écran

**RBOUBRIT** · 02/01/2017, 12h03

Bonjour, j'ai un problème que je n'arrive pas à résoudre et sa me prend vraiment la tête:
j'ai essayé plein de sollution mais je n'arrive pas

Mon problème est que j'affiche un tableau avec JS, pas entièrement car je cache volontairement un colonne qui va occupé trop de place donc j'ai d&écidé de l'afficher dans un textarea séparément
lorsque je click sur une ligne du tableau, j arrive à récupérer ma donnée id_livre dans mon input idc1 alors que j'ai essayé par plusieurs moyens de faire la même chose pour resume dans idc3, impossible

Je vous remercie de votre aide

//ce qui me permetde recuper un tableau affiché dans ma page

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
 
<tbody>    
	 	  <tbody> 
 
         <tr onClick="fctClick(this);">
 
	<td id="c1"><?php echo $donnees['id_livre'];?></td>
       	<td id="c2"><?php echo $donnees['titre'];?></td>
	<td id="c3" style="display:none"><?php echo $donnees['resume'];?></td>
 
 
       </tr>
	   </tbody> 
 
 
 
     //fonction qui me permet de recuperer le contenu affiché à l'écran de la balise td (c1)  dans mon champ text input
 
     function fctClick(elt){
     var str = elt.innerText ; elt.textContent;
     var tab = new Array();
     tab = str.split("	");
     document.getElementById('idc1').value=tab[0];
     document.getElementById('idc1').value=tab[2];   // je n'arrive pas à récuperer le contenu de   cette 
     }
 
<input type="text" id="idc1"/>     //ça fonctionne 
<textarea id="idc3"/> </textarea>     //ça ne fonctionne pas

**eleydet** · 02/01/2017, 14h13

Bonjour,

Voici ce que je propose. Le code en php a été remplacé par du texte pour effectuer les tests.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
//fonction qui me permet de recuperer le contenu affiché à l'écran de la balise td (c1)  dans mon champ text input
 
function fctClick(){
  var str1 = document.getElementById('c1').innerText;
  var str2 = document.getElementById('c2').innerText;
  var str3 = document.getElementById('c3').innerText;
  document.getElementById('idc1').value=str1;
  document.getElementById('idc3').value=str3;
}
</script>
</head>
<body>   
 
<table border="1"> 
<tr onClick="fctClick();">
<td id="c1">donnee1</td>
<td id="c2">donnee2</td>
<td id="c3" style="display:none">donnee3</td>
</tr>
</table> 
 
<input type="text" id="idc1"/>
<textarea id="idc3"/> </textarea>
 
</body>
</html>

**RBOUBRIT** · 02/01/2017, 16h14

Bonjour, merci pour votre réponse
votre solution me convient très bien par contre j'ai un tableau de plusieurs lignes et quand je clic sur une autre ligne, mon script fctClick ne fonctionne plus, il récupère dans tous les cas que c3 de la première ligne ,je vous remercie pour votre aide.

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
 
<script>
function fctClick(){
  var str1 = document.getElementById('c1').innerText;
  var str2 = document.getElementById('c2').innerText;
  var str3 = document.getElementById('c3').innerText;
  document.getElementById('idc1').value=str1;
  document.getElementById('idc3').value=str3;
}
</script>
 
<table id="matable">
   <tr id="lingne1">
           <td>Numéro</td>
           <td>Titre du livre</td>
   </tr>
	<?php
            while($donnees=$reponse->fetch())
            {
            ?>
 
     <tbody>    
	 <tr onClick="fctClick(this);"  >
 
			<td id="c1"><?php echo $donnees['Titre'];?></td>
			<td id="c2"><?php echo $donnees['ISBN'];?></td>
			<td id="c3" style="display:none"><?php echo $donnees['nom'];?></td>
	</tr>
      </tbody>         
 
            <?php
            }
           
            ?>
</table>
<input type="text" id="idc1"/>
<textarea id="idc3"/> </textarea>

**eleydet** · 02/01/2017, 16h29

Rebonjour,

Chaque cellule du tableau doit avoir un identifiant unique. On récupère la valeur à l'aide de cet identifiant.

**RBOUBRIT** · 02/01/2017, 16h42

Bonjour, c'est justement à ce niveau que je n'arrive pas à produire le code, mon tableau n'est pas static (nombre de lignes peut évoluer en + ou -) donc je ne peux pas à l'avance définir des id unique pour chaque le lignes.
merci

**NoSmoking** · 02/01/2017, 18h12

Bonjour,

Envoyé par eleydet

Chaque cellule du tableau doit avoir un identifiant unique.

on n'est nullement obligé de passer par des ID sur les éléments, dans le cas présent il suffit de récupérer les cellules, collection rows[i].cells, de lire les données, textContent, et de les affecter aux champs correspondants.

On en a déjà parlé dans cette discussion :
Cliquer sur une ligne de tableau créé depuis une base de données pour remplir un formulaire, une solution complète est proposée au post #8.

**eleydet** · 02/01/2017, 20h31

Bonsoir,

Selon NoSmoking
on n'est nullement obligé de passer par des ID sur les éléments, dans le cas présent il suffit de récupérer les cellules..

Il y a plusieurs solutions pour résoudre le problème. Passer par les ID est peut-être plus simple si la page comporte plusieurs tableaux. J'aurais peut-être dû écrire : Si on choisit d'attribuer à chaque cellule du tableau un identifiant, alors cet identifiant doit être unique.

**RBOUBRIT** · 02/01/2017, 22h46

Bonjour,
Je post la solution, merci à tous

exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function fctClick(obj){
 
var resume=obj.cells[1].textContent;
document.getElementById('resume').value=resume;
 
}
 
action sur le tr
<tr onclick="fctClick(this)">
	<td><?php echo $donnees['type_oeuvre'];?></td>
	        <td style="display:none"><?php echo $donnees['nom_editeur'];?></td>

Récupérer une donnée non affichée à l'écran

JavaScript

Vue hybride

Discussions similaires

Partager

Partager