table & innerHTML probleme avec un formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : table & innerHTML probleme avec un formulaire

ffluff

Challenge Everything

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 :

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function $(element){
if (typeof element == 'string')
return document.getElementById(element);
return element;
}
var nbFantomes = 0;
function addFantome(idTableFantome){
$(idTableFantome).innerHTML += '<tr>'+
'<td>' + nbFantomes + '</td>'+
'<td class="cInputData">'+
'<input name="data[' + nbFantomes + '][numero]" id="Fantome_' + nbFantomes + '_Numero" value="xxx" type="text" />'+
'</td>'+
'<td class="cInputData">'+
'<select name="data[' + nbFantomes + '][produit_id]" id="Fantome_' + nbFantomes + '_Produit_id">'+
'<option value=""></option>'+
'<option value="2">0 OPT</option>'+
'<option value="5">1 OPT</option>'+
'<option value="6">2 OPT</option>'+
'<option value="7">3 OPT</option>'+
'<option value="8">4 OPT</option>'+
'<option value="44">5 OPT</option>'+
'<option value="47">6 OPT</option>'+
'<option value="48">7 OPT</option>'+
'</select>'+
'</td></tr>';
nbFantomes += 1;
}
</script>
</head>
<body>
<input type="button" value="Ajouter un fantome" onclick="addFantome('iTableFantomes'); "/>
<table id="iTableFantomes" border="1">
<tr>
<th>n</th>
<th>Numero</th>
<th>SELECT</th>
</tr>
</table>
</body>
</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 ?

Publicité

kao98

...

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

ffluff

Challenge Everything

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.

kao98

...

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

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

tpierron

Ça me parait normal comme comportement.

Le problème c'est que tu fais :

Code :

table.innerHTML += codehtml

Ce qui est certainement traduit en interne par :

Code :

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

FORUM HardWare.fr

Programmation

HTML/CSS

table & innerHTML probleme avec un formulaire

Sujets relatifs
problème sélection dans un intervalle en sql	[Probleme] Dynamic_cast<T>(x) - Unix Segfault
Gros problème de session	[Joomla] Modifier formulaire de soumission d'article
Petit problème avec un hash, des tableaux et des références	Probleme MySQL
Problème alignement bloc CSS [terminé]	Problème d'adition avec js
probleme grammaire linéaire en C	pré remplir un champs de formulaire
Plus de sujets relatifs à : table & innerHTML probleme avec un formulaire

Page générée en 0.058 secondes