table & innerHTML probleme avec un formulaire

table & innerHTML probleme avec un formulaire - HTML/CSS - Programmation

Marsh Posté le 11-12-2008 à 17:13:40    

Bonjour,
 
J'ai une table T, un bouton B et quand je clique sur B je veux que ca rajoute une ligne à T.
Jusque la ca marche nickel.
 
Mon probleme c'est lorsque que je mets un <select> dans une des colonnes
Quand j'ajoute la premier ligne ca marche.
Je choisi l'option voulu du select de la premiere ligne.
 
Et quand j'ajoute la 2eme ligne, ca me "reset" l'option choisi dans la premiere ligne ...
 
 
Voici un exemple de code : http://rafb.net/p/MNV9Dv18.html
 

Code :
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/JavaScript">
  5.  function $(element){
  6.   if (typeof element == 'string')
  7.        return document.getElementById(element);
  8.   return element;
  9.  }
  11.  var nbFantomes = 0;
  12.  function addFantome(idTableFantome){
  13.   $(idTableFantome).innerHTML += '<tr>'+
  14.    '<td>' + nbFantomes + '</td>'+
  15.    '<td class="cInputData">'+
  16.     '<input name="data[' + nbFantomes + '][numero]"     id="Fantome_' + nbFantomes + '_Numero" value="xxx" type="text" />'+
  17.    '</td>'+
  18.    '<td class="cInputData">'+
  19.     '<select name="data[' + nbFantomes + '][produit_id]" id="Fantome_' + nbFantomes + '_Produit_id">'+
  20.      '<option value=""></option>'+
  21.      '<option value="2">0 OPT</option>'+
  22.      '<option value="5">1 OPT</option>'+
  23.      '<option value="6">2 OPT</option>'+
  24.      '<option value="7">3 OPT</option>'+
  25.      '<option value="8">4 OPT</option>'+
  26.      '<option value="44">5 OPT</option>'+
  27.      '<option value="47">6 OPT</option>'+
  28.      '<option value="48">7 OPT</option>'+
  29.     '</select>'+
  30.    '</td></tr>';
  32.    nbFantomes += 1;
  33.  }
  35. </script>
  37. </head>
  38. <body>
  40. <input type="button" value="Ajouter un fantome" onclick="addFantome('iTableFantomes'); "/>
  42. <table id="iTableFantomes" border="1">
  43. <tr>
  44.  <th>n</th>
  45.  <th>Numero</th>
  46.  <th>SELECT</th>
  47. </tr>
  48. </table>
  51. </body>
  52. </html>


 
J'ai essayé sous firefox/epiphany-gecko/epiphany-webkit et toujours le meme résultat.
 
J'avoue ne pas comprendre.Quelqu'un pour m'aider ?

Reply

Marsh Posté le 11-12-2008 à 17:13:40   

Reply

Marsh Posté le 11-12-2008 à 17:23:51    

J'ai parcouru rapidement, je n'ai pas trouvé, comme ça, pourquoi ça déconne.
Mais tu devrais essayé, plutôt que d'ajouter ta ligne par InnerHTML, de l'ajouter par le DOM avec des appendChild & Co.


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 11-12-2008 à 17:43:46    

Oui effectivement cela fonctionne en faisant comme ca.
 
Le probleme c'est que la nouvelle ligne à inserer est obtenue avec une ligne par défaut de ma table.
 
En gros je fais codeHTML = ligneParDefault.innerHTML;
je remplace les id & nom de variable
et hop j'injecte tout ca dans la table qu'il faut.

Reply

Marsh Posté le 11-12-2008 à 17:46:46    

Tu peux aussi faire ça en utilisant les méthodes du DOM !


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 11-12-2008 à 18:44:09    

Ça me parait normal comme comportement.
 
Le problème c'est que tu fais :

Code :
  1. table.innerHTML += codehtml


Ce qui est certainement traduit en interne par :

Code :
  1. table.innerHTML = table.innerHTML + codehtml


Et voilà, ton selectedIndex (ou l'attribut selected sur l'<option> ) n'est certainement pas inclu dans le innerHTML, du coup, c'est le premier qui se trouve sélectionné.
 
Bref, passe par des manipulations DOM.


Message édité par tpierron le 11-12-2008 à 18:44:38
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed