Afficher les données d’une ligne d’un tableau après un click

**Bano** · 13/11/2017, 16h43

Bonjour,
J’ai un tableau généré par le code PHP dans lequel un compteur a été placé au niveau de la balise « tr ».
Je veux afficher, après un click sur une ligne quelconque, deux informations dont l’une dans une liste déroulante et l’autre dans une zone de texte. Pour le moment, les données qui sont affichées dans les zones citées sont aléatoires quand bien même j'ai le numéro de la ligne sélectionnée. Merci d'avance pour tout apport. Ci-dessous le code PHP:

Code php :

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
<?php          
    require_once('.././Connections/connection_sgesti.php');	
	echo " <table class='reference2' width='200' id='montableau'>";
    echo "<tr><th colspan='8'>LISTE DES IMPACTS </span></th></tr>";
    echo "<tr bgcolor='#CCCCCC'>";
     echo " <td width='5%'><strong>Num&eacute;ro</strong></td>
      <td width='19%'><strong>Type impact </strong></td>
      <td width='31%'><strong>Nombre</strong></td>  
	  <td width='31%'><strong>Titre</strong></td>       
      <td align='center'><strong>MAJ</strong></td>
    </tr>";
	$i=0;
	$query="select ime.idimpact,ti.nomimpact,ime.nombreimpact,e.titreevnt from evenement e, impact_evenement ime, typeimpact ti where e.idevnt=ime.idevnt and ime.idimpact=ti.idimpact";
	$result=pg_query($dbconnect,$query) or die('Echec requête:' .pg_last_error());
	while ($row=pg_fetch_assoc($result)) 
    	{	
	echo "<tr id='".$i."' <a onclick='afficher_impact(".$i.")'>>";	
	 echo " <td> ".$row['idimpact']."</td>"; 
	 echo "<td> ".$row['nomimpact']."</td>";	 
	 echo  "<td> ".$row['nombreimpact']."</td>";
	 echo  "<td> ".$row['titreevnt']."</td>";  
	 echo " <td class='center'><a onclick='modifier_impact(".$i.")'><img src='./images/b_edit.png'/></a></td>";	 
    echo "</tr>";	
	 $i=$i+1;  
	  }	
    echo "</table>";		 
?>

Puis le code AJAX:

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
$(document).ready(function() {
});
 
    function afficher_impact(id){
	var indexligne=id;		
	alert(id);	     	
	var arrayLignes =  document.getElementById("montableau").rows; 	
	var longueur = arrayLignes.length;
	if (longueur>1)
	   {
	     var typeimpact= arrayLignes[indexligne].cells[1].innerHTML;	  
	     var nombreimpact= arrayLignes[indexligne].cells[2].innerHTML;		
 
	    document.getElementById('txtnombre').value=nombreimpact;	
	    //document.getElementById('typeimpact').value =id;
		//$('#typeimpact').val('<option value='+ indexligne +'>'+ typeimpact +'</option>');
	    $('#typeimpact').val(typeimpact);
	 }
 
    }

**NoSmoking** · 13/11/2017, 18h50

Bonjour,
pour démarrer il est préférable de mettre le code HTML généré, (CTR +U), et non le code serveur.

Pour continuer il va te falloir choisir entre jQuery et pur JS ton code n'en sera que plus clair.

Que n'arrives tu pas à faire, pourrais tu être plus clair !?!

**Bano** · 14/11/2017, 09h00

Bonjour, désolé pour ce retard. Au fait, le tableau HTML est créé depuis le premier code PHP que j'ai partagé. Le tableau s'affiche avec toutes les données que je veux quand je clique sur le bouton "Afficher type impact". Mais, ce que je veux et que je ne parviens pas est le suivant: Avec le tableau HTML affiché, quand je clique sur une ligne du tableau, il faut que les données se trouvant sur la ligne correspondante s'affichent dans les deux zones (type d'impact dans la liste déroulante, nombre d'impact zone de texte).
Le

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
 
<table height="94" class="reference3">
  <tr>
    <th colspan="4"><div align="left">IMPACTS HUMANITAIRES </div></th>
    </tr>
  <tr>
    <td width="76">Type impact </td>
    <td width="188"><select name='typeimpact' size='1' id='typeimpact' tabindex="5">    
              <?php
                                           $result= pg_query("SELECT * FROM  typeimpact order by nomimpact");
                        while($data=pg_fetch_array($result)){
                        echo'<option value="'.$data[0].'">'.$data[1];
                        echo'</option>'."\n";
                       }
                        echo'</select>'."\n";                                   
                                        ?>
          </select>
	  </td>
    <td width="47">Nombre</td>
    <td width="119"><input name="txtnombre" type="text" id="txtnombre" size="10"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="btnImpact" style="border-radius:100px; border-color:#B5DC10;" value="Ajouter type impact" onClick='affichertableau()'></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<label for="textfield4" id="montableau"></label>

**Bano** · 14/11/2017, 14h06

Bonjour,
J'arrive maintenant à prendre une information dans le tableau et à l'afficher dans une zone de texte avec le code suivant:

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
 
 function afficher_impact(id){
	var indexligne=id;
	var Valeurs=new Array();
    var lignes= document.getElementById('montableau').getElementsByTagName('tr');       
 
	          // Ligne correspondante au type d'impcat(Liste deroulnte)
             if(lignes[id].getElementsByTagName('td')[1])
                  {
                 var typeimpacts= lignes[id].getElementsByTagName('td')[1].innerHTML ;								  
				 $("#typeimpact").val(typeimpacts);				
                  }
				  // Ligne correspondante au nombre d'impacts	   
			  if(lignes[id].getElementsByTagName('td')[2])
                 {
                  var nombreimpact= lignes[id].getElementsByTagName('td')[2].innerHTML ;
				  document.getElementById('txtnombre').value=nombreimpact;					  				  
                 }          
    }