Code JS fonctionnel sous FireFox mais pas sous IE
cornichon
La table HTML suivante regroupe des informations sur les contacts d'une
entreprise ( Nom, pr�nom, email, etc ... )
des inputs permettent de rentrer des donn�es et de les ajouter � cette table en
cliquant sur le bouton AJOUTER(original isnt'it ?). Petit hic, sous
firefox(3.0.15) tout se passe bien, alors qu'avec IE(6.0.2800), la ligne ne
s'ajoute pas � ma table, et la barre de statut en bas � gauche affiche erreur
sur la page.
<table id="table_cont" name="table_cont">
<tr>
<td> </td>
<td>NOM</td><td>Pr�nom</td><td>Civilit�</td><td>EMAIL</td>
<td>fonction 1</td><td>fonction
2</td><td>T�l�phone</td><td>Fax</td><td>Mobile</td><td>statut</td>
</tr>
</table>
Voici le vode JS de la fonction Ajouter()
function Ajouter() {
var form=document.getElementById('grille_cont');
var nom=form.nom.value;
var prenom=form.prenom.value;
var civ=form.civ.value;
var email=form.email.value;
var f1=form.f1.value;
var f2=form.f2.value;
var tel=form.tel.value;
var fax=form.fax.value;
var mob=form.mob.value;
if(nom=="" || email=="")
{alert('indiquer le nom du contact ainsi que son email')
}
else{
var l=form.liste_cont.options.length;
var oldHTML= document.getElementById('table_cont').innerHTML;
var catHTML='<tr name="lc" id="'+l+'"><td
onClick="supp('+l+');">xxx</td><td>'+nom+'</td><td>'+prenom+'</td><td>'+civ+'</td><td>'+email+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+tel+'</td><td>'+fax+'</td><td>'+mob+'</td><td
id="st'+l+'">ajout</td></tr>';
var newHTML = oldHTML + catHTML;
document.getElementById('table_cont').innerHTML=newHTML;
var o=new Option(l,l);
form.liste_cont.options[l]=o;
}
form.nom.value="";form.prenom.value="";form.civ.value="";form.email.value="";form.f1.value="";form.f2.value="";form.tel.value="";form.fax.value="";form.mob.value="";
}<FORM name="grille_cont" id="grille_cont" action="c_cont.php" method="post">
Nom :<INPUT type="text" name="nom" size="15" />
Pr�nom :<INPUT type="text" name="prenom" size="15" />
Civilit� :<SELECT name="civ" size="1">
<option selected="selected" value="">civilit� du contact</option>
<option value="Me">Me</option>
<option value="Melle">Melle</option>
<option value="Mr">Mr</option>
</SELECT>
Email :<INPUT type="text" name="email" size="15" />
Fonction 1:<select name="f1">
<option value="" selected="selected"></option>
<option value="pr�sident">Pr�sident</option>
<option value="directeur">Directeur</option>
</select>
Fonction 2:<select name="f2">
<option value="" selected="selected"></option>
<option value="commercial">commercial</option>
<option value="technique">technique</option>
</select>
T�l�phone :<input name="tel" type="text" size="15"/>
Fax :<input name="fax" type="text" size="15"/>
Mobile :<input name="mob" type="text" size="10" />
<!--
NE PAS SUPPRIMER
ce select est en visibilit� cach�(hidden) car il est utile au code javascript
mais pas � l'affichage
-->
<SELECT id="liste_cont" style="visibility:hidden" name="liste_cont"
size="3"></SELECT>
<!-- fin du select en visibilit� cach�e -->
<INPUT type="button" value="Ajouter ce contact" onclick="Ajouter();"/>
</FORM>
Une id�e du pourquoi de la chose ?
Merci de m'avoir lu et bonne journ�e � tous
SAM
> Bonjour,
>
> La table HTML suivante regroupe des informations sur les contacts d'une
> entreprise ( Nom, pr�nom, email, etc ... )
> des inputs permettent de rentrer des donn�es et de les ajouter � cette table en
> cliquant sur le bouton AJOUTER(original isnt'it ?). Petit hic, sous
> firefox(3.0.15) tout se passe bien, alors qu'avec IE(6.0.2800), la ligne ne
> s'ajoute pas � ma table, et la barre de statut en bas � gauche affiche erreur
> sur la page.
Je suis m�me surpris que �a fonctionne avec Fx (sans alertes de la
console d'erreurs).
> <table id="table_cont" name="table_cont">
> <tr>
> <td> </td>
> <td>NOM</td><td>Pr�nom</td><td>Civilit�</td><td>EMAIL</td>
> <td>fonction 1</td><td>fonction
> 2</td><td>T�l�phone</td><td>Fax</td><td>Mobile</td><td>statut</td>
> </tr>
> </table>
>
> Voici le vode JS de la fonction Ajouter()
> function Ajouter() {
> var form=document.getElementById('grille_cont');
var form = document.forms['grille_cont'];
> var nom=form.nom.value;
> var prenom=form.prenom.value;
> var civ=form.civ.value;
> var email=form.email.value;
> var f1=form.f1.value;
> var f2=form.f2.value;
> var tel=form.tel.value;
> var fax=form.fax.value;
> var mob=form.mob.value;
> if(nom=="" || email=="")
> {alert('indiquer le nom du contact ainsi que son email')
> }
> else{
> var l=form.liste_cont.options.length;
> var oldHTML= document.getElementById('table_cont').innerHTML;
> var catHTML='<tr name="lc" id="'+l+'"><td
> onClick="supp('+l+');">xxx</td><td>'+nom+'</td><td>'+prenom+'</td><td>'+civ+'</td><td>'+email+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+tel+'</td><td>'+fax+'</td><td>'+mob+'</td><td
> id="st'+l+'">ajout</td></tr>';
> var newHTML = oldHTML + catHTML;
> document.getElementById('table_cont').innerHTML=newHTML;
essayer :
document.getElementById('table_cont').tbody.innerHTML=newHTML;
ou :
document.getElementById('table_cont').getElementsByTagName('TBODY')[0].innerHTML=newHTML;
--
sm
SAM
> Le 12/15/09 8:59 AM, cornichon a �crit :
>> document.getElementById('table_cont').innerHTML=newHTML;
>
> essayer :
> document.getElementById('table_cont').tbody.innerHTML=newHTML;
ou:
document.getElementById('table_cont').tbodies[0].innerHTML=newHTML;
--
sm
Laurent vilday
ou plut�t avec Tbodies[0] :)
Ceci dit, innerHTML et les tableaux �a n'a jamais fait tr�s bon m�nage.
--
laurent
Laurent vilday
> ou plut�t avec Tbodies[0] :)
Pfff en vrai le mieux c'est quand m�me tBodies[0] :)
stupides, stupides doigts ...
--
laurent
cornichon
changer .innerHTML en .tbody.innerHTML n'a pas r�solu mon probl�me.
Par contre, j'avance : ayant double-cliqu� sur le symbole "erreur sur la page"
en bas � gacuhe dans la barre de statut, la ligne qui pose probl�me se r�v�le
�tre
28: var o=new Option(l,l);
Le message d'erreur d'IE est le suivant :
Ligne : 28
Car : 3
Erreur: Erreur d'�x�cution inconnue
Code : 0
SAM
> SAM :
>> Le 12/15/09 10:19 AM, SAM a �crit :
>>> Le 12/15/09 8:59 AM, cornichon a �crit :
>>
>>>> document.getElementById('table_cont').innerHTML=newHTML;
>>>
>>> essayer :
>>> document.getElementById('table_cont').tbody.innerHTML=newHTML;
>>
>> ou:
>> document.getElementById('table_cont').tbodies[0].innerHTML=newHTML;
>
> ou plut�t avec Tbodies[0] :)
Ha? bon, peut-�tre ? ;-) (enfin ... un truc dans l'genre, quoi)
M'enfin avec
GetElementByTagName('TBODY')[0]
on est certain d'assurer.
> Ceci dit, innerHTML et les tableaux �a n'a jamais fait tr�s bon m�nage.
heu ... je n'en suis pas si s�r
m�me s'il parait plus �l�gant de jongler avec les rows et cells
comme ici par exemple :
<http://www.howtocreate.co.uk/tutorials/javascript/domtables>
o� ils utilisent le bon tboDiEs||Tbodies||TBodies||tBodies||tbodies
--
sm
SAM
je disais bien ... qque chose dans cette id�e l� ;-)
SAM
> merci � tous pour votre aide, je vais tester vos solutions
> changer .innerHTML en .tbody.innerHTML n'a pas r�solu mon probl�me.
non mais
document.getElementById('table_cont').getElementsByTagName('TBODY')[0].innerHTML=newHTML;
aurait d�.
> Par contre, j'avance : ayant double-cliqu� sur le symbole "erreur sur la page"
> en bas � gacuhe dans la barre de statut, la ligne qui pose probl�me se r�v�le
> �tre
> 28: var o=new Option(l,l);
>
> Le message d'erreur d'IE est le suivant :
Les erreurs rapport�es par IE sont souvent du pipeau !
Autant l'erreur �tait avant
( document.getElementById('table_cont').innerHTML=newHTML; )
c'est m�me certain :
IE ne voulant rien ajouter dans un table mais seulement dans le(s)
tbody(s) du table (ou le tfoot ou le thead)
Car l�, comme �a pris en dehors de tout contexte, je ne vois rien
d'incorrect �
var o=new Option(l,l);