11548 sujets

JavaScript, DOM et API Web HTML5

Création de tableau dynamique et formulaire (sous IE)

Bonjour.
Voila un problème ou je sèche totalement.

Le Script :
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>test</title>
  
  <script language="JavaScript" type="text/javascript">
  function setFormOrganisation(id_form,organisation,class_name,table_class_name)
  {
    var obj_form = document.getElementById(id_form);
    var id_zone_msg = 'sform_zone_msg_' + id_form;  
    var cote = organisation.toLowerCase();
    if (!class_name) class_name = 'zone_msg_form';
    if (!table_class_name) table_class_name = 'table_msg_form';
    
    var new_ul = document.createElement('ul');
    new_ul.setAttribute('className',class_name);
    new_ul.setAttribute('id',id_zone_msg);
    new_ul.appendChild(document.createTextNode('Messages : '));
    
    
    if (cote == 'top')    obj_form.insertBefore(new_ul,obj_form.firstChild);
    if (cote == 'bottom') obj_form.appendChild(new_ul);
   
    if (cote == 'right' || cote == 'left')
    { 
      var next = obj_form.nextSibling;
      var parent = obj_form.parentNode;
      var new_td_msg = document.createElement('td');
      var new_td_frm = document.createElement('td');
      var new_table  = document.createElement('table');
      new_table.setAttribute('className',table_class_name);
      new_td_msg.appendChild(new_ul);   
      new_td_frm.appendChild(obj_form); 
      
      new_ul.style.marginTop = '0px';
      new_ul.style.paddingLeft = '15px';
      
      if (cote == 'right')
      {
        new_table.appendChild(new_td_frm);
        new_table.appendChild(new_td_msg);
      }
      else
      {
        new_table.appendChild(new_td_msg);
        new_table.appendChild(new_td_frm);
      }
    
      parent.insertBefore(new_table,next); 
    }  
  } 
  
  
    
  </script>
  
  
  </head>
  <body onload="setFormOrganisation('f1','right');
                document.getElementById('sform_zone_msg_f1').innerHTML = 'TEST : <li>Une Option</li><li>Une Autre Option</li>';">
                             
    <form id="f1" method="post" action="test.htm">
      Login : <input type="text" maxlength="30" size="25" /><br />
      Pass : <input type="text" maxlength="30" size="25" /><br />
      <br />
      <input type="submit" value="Envoyer" />
    </form> 

  </body>
</html>


Les explications :
Le but du script est de creer un zone de messages pour un formulaire, celle ci pouvant se positionner au haut en bas a gauche ou a droite.

Le problème se pose pour une création de la zone a gauche ou a droite.
Sous mozilla la zone est correctement créée et fonctionne. Par contre sous IE, rien ne s'affiche.

Pour rentrer dans les détails, le javascript va créer un tableau de 2 cases, une pur le formulaire, l'autre pour la zone de messages.
En gros après la fonction setFormOrganisation() on a :
<body>
  <table>
    <td>
      <form> .... </form>
    </td>
    <td>
      <ul id="sform_zone_msg_f1">.....</ul>
    </td>
  </table>
</body>


Voila merci d'avance de prendre la peine de comprendre.
Si quelqu'un à la solution pour que ce script marche sous IE, il est le bienvenu
C'est parce que IE veut un vrai tableau!
Cad avec un tbody (et éventuellement un thead). J'ai déjà eu ce problème.

Il faudrait que que ton tableau ressemble a ça:
<body>
  <table>
    <tbody>
        <td>
          <form> .... </form>
        </td>
        <td>
          <ul id="sform_zone_msg_f1">.....</ul>
        </td>
    <tbody>
  </table>
</body>
Bon, j'ai changé la fonction de facon a avoir un tbody...
Et ca ne marche toujours pas.

function setFormOrganisation(id_form,organisation,class_name,table_class_name)
{
  var obj_form = getElementWithId(id_form);
  var id_zone_msg = 'sform_zone_msg_' + id_form;  
  var cote = organisation.toLowerCase();
  if (!class_name) class_name = 'zone_msg_form';
  if (!table_class_name) table_class_name = 'table_msg_form';
  
  var new_ul = document.createElement('ul');
  new_ul.id = id_zone_msg;
  new_ul.className = class_name;
  new_ul.style.display = 'none';
  new_ul.appendChild(document.createTextNode('Erreurs : '));

  if (cote == 'top')    obj_form.insertBefore(new_ul,obj_form.firstChild);
  if (cote == 'bottom') obj_form.appendChild(new_ul);

  if (cote == 'right' || cote == 'left')
  { 
    var next = obj_form.nextSibling;
    var parent = obj_form.parentNode;
    var new_td_msg = document.createElement('td');
    var new_td_frm = document.createElement('td');
    var new_tbody = document.createElement('tbody');
    var new_table  = document.createElement('table');
    
    new_table.className = table_class_name;
    new_table.appendChild(new_tbody);
    new_td_msg.appendChild(new_ul);   
    new_td_frm.appendChild(obj_form); 
    
    if (cote == 'right')
    {
      new_tbody.appendChild(new_td_frm);
      new_tbody.appendChild(new_td_msg);
    }
    else
    {
      new_tbody.appendChild(new_td_msg);
      new_tbody.appendChild(new_td_frm);
    }
    
    parent.insertBefore(new_table,next); 
  }


Je ne comprend vraiment pas pourquoi le tableau disparait sous IE.
D'autant plus qu'avec l'analyseur DOM, j'ai pu constater que le structure était bien celle voulue
Sujet clos
Aller à