IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Alternative à getElementById()


Sujet :

JavaScript

  1. #1
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut Alternative à getElementById()
    Salut a tous,

    j'ai un petit soucis avec AJAX et internet explorer. En fait, j'ai une page qui va générer un tableau dynamiquement en AJAX et un sous tableau est appelé et affiché grace à des id. Ces id sont donc généré au fur et a mesure, ce qui ne plait apparament pas a internet explorer (ca marche sous FF) qui ne prend en compte que les id générés au chargement de la page.

    Comment puisje faire. On ma conseiller d'utiliser appendchild() mais j'ai pas très bien compris comment ca marche. Pouvez vous m'aider, ou proposer une autre alternative

    ps: Mon code est simple. J'ai un moteur de recherche qui renvoie les résulatats automatiquement dans un <div id=test></div>. Ce tableaux fait appale a des sous-tableaux qui sont affiché grace aux id des tableaux deja généré:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    echo'<tr id=a'.$id[$i].' class="'.$class.'" ><td onMouseOver="this.className=\'tableserieon\';" onMouseOut="this.className=\''.$class.'\';" onClick="liens(\''.$lienserie.'\');"><a href="'.$lienserie.'">&nbsp;'.$Titre[$i].'</a></td><td onMouseOver="this.className=\'tableserieon\';" onMouseOut="this.className=\''.$class.'\';" onClick="if(document.getElementById(\'afftome'.$id[$i].'\').innerHTML==\'\'){go(\''.$Titre[$i].'\',\'afftome'.$id[$i].'\',\'rien\',\'../AJAX/accueilmanga2.php?titre=\');} else{document.getElementById(\'afftome'.$id[$i].'\').innerHTML=\'\';}"><img src="../imagesite/'.$habillage.'/loupe2.gif" alt="loupe"> ('.$nbtomes[$i].')</td></tr>';
     
     
    echo '<tr id="afftome'.$id[$i].'"></tr>';
    J'ai mis le code en php. La premiere ligne contient la fonction (go) qui permet de récupérer des donnée par ajax et de les mette dans l'id correspondant à la 2ème ligne.

    Voilà, si vous avez des questions hésitez pas!

    Merci d'avance

  2. #2
    Membre chevronné Avatar de Mobius
    Profil pro
    none
    Inscrit en
    Avril 2005
    Messages
    463
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : none

    Informations forums :
    Inscription : Avril 2005
    Messages : 463
    Par défaut
    une solution serait de gerer toi meme, l'association entre les id et tes div dans un tableau... Merci IE

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Oui une solution est de passer par le DOM pour créer de nouveaux éléments sur la page ...
    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Tableau DOM</title>
     
    <script type='text/javascript'>
    var nbligne=3;
    var nbcol=3;
    var Tableau;
    var THeader;
    var TBody;
    var Ligne;
    var Cellule;
     
    function nouveauTableau(){return document.createElement('table');}
    function nouveauHeader(){return document.createElement('theader');}
    function nouveauBody(){return document.createElement('tbody');}
    function nouvelleLigne(){return document.createElement('tr');}
    function nouvelleCellule(){return document.createElement('td');}
     
    function Build(){
     
    Tableau=nouveauTableau();
    Entete=nouveauHeader();
    Corps= nouveauBody()
     
    for(i=0;i<nbligne;i++){
    			Ligne=nouvelleLigne();
    			Ligne.id='ligne'+i;
     
    			for (j=0;j<nbcol;j++){
    						Cellule=nouvelleCellule();
    						Cellule.id='Cell'+i+'_'+j;	
    						Cellule.style.border='solid 1px blue';
    						Cellule.innerHTML='Cell'+i+'_'+j;	
    						Cellule.onclick=function(){alert('l\'id de cette cellule est: '+this.id)}
    						Ligne.appendChild(Cellule);
    						}
     
    			Corps.appendChild(Ligne);
    			Tableau.appendChild(Corps)
     
    			}
     
    document.body.appendChild(Tableau)
    }
    </script>
    </head>
    <body onload='Build()'>
    </body>
    </html>
    A noter que IE n'autorise l'append dasn le tableau que dans le theader ou le tbody, d'ou la necessité de l'ajouter dasn le code ...

    firefox extrapole (pour une fois )
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    Merci ca me parait etre une methode intéressante.

    La je pense juste généré un <tr> avec cette methode est-ce possible.

    VOila le tableau que j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <table>
        <tr>
             <td Onclick="cliquer ici va entrainer une requette AJAX et va renvoy"er les résulats dans le tr suiva,t">
             <td>
        <tr>
         <tr id="">Ligne qu'il faut créer pour afficher les résultat dedans 
         </tr>
    </table>
    ps: La page aja génére un tableau qu'il faut insérer dans le tr.

    J'ai essayé de bidouiller un truc, mais le problème est que je ne vois pas comment faire pour créer un <tr> après celui ou ce plasse l'evenement.

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Ben oui je t'ai juste donné le tout à titre didactique ...

    pour ajouter juste un tr prend uniquement la partie createElement('tr')

    et append ensuite là ou tu veux ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    append ca fait quoi?

    La j'ai fait une create tr avec un innerhtml pour mettre du contenu dedans mais rien ne se passe (pas d'erreur et rien qui s'affiche).

  7. #7
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    En gros :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    TBody=document.getElementById("TBody_0")
    var Tr=document.createElement("TR")
    Tr.innerHTML = HTML
    TBody.appendChild(Tr)
    appendChild ajoute l'élement dans le noed.

  8. #8
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    Le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    TBody=document.getElementById("TBody_0")
    Il correspond à l'id du tableau? du tr avant?

  9. #9
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    ex concret :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <table>
       <tbody id="TBody_0">
          <tr>
             <td>X</td>
          </tr>
          <!-- Emplacement de la prochaine ligne -->
       </tbody>
    </table>

  10. #10
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    Désolé de ressortir ce post mais j'était partis en vacances sans avoir pu résoudre mon problème.

    Je viens d'essayer cette methode ca marche, mais en fait ca efface le tr du dessus.

    Est-ce normal?

  11. #11
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    En fait ca marche avec ton exemple mais que sous FF sous internet explorer il rajoute un petit espace a chaque click mais il ne met pas le contenu avec le innerhtml.

    Bizarre non?

  12. #12
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    SI vous voulez voir c'est simple essayé ce code sous FF et sous IE:

    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
     
    <script type='text/javascript'>
    function test()
    {
    	TBody=document.getElementById("TBody_0")
    	var Tr=document.createElement("TR")
    	Tr.innerHTML = 'test';
    	TBody.appendChild(Tr)
    }
    </script>
    <table style="border: 1px blue solid;">
       <tbody id="TBody_0">
          <tr>
             <td onclick="test();">Cliquez ici!</td>
          </tr>
          <!-- Emplacement de la prochaine ligne -->
       </tbody>
    </table>
    Pourquoi ca ne marche pas avec IE?

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    heu ben ils sont ou les td ????

    il faut faire des create de td et un create de tr,

    faire un append des td dasn le tr puis du tr dasn le tbody ...
    regarde l'exemple que je t'ai donné ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre éprouvé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Par défaut
    Merci, en effet ca marche mieu.

    Il me reste qu'un seul probleme.

    J'ai essayer d'attribuer un colspan a cet id dernierment crée mais ca ne marche pas

    mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
     function test(idbody,idtr)
     {
    TBody=document.getElementById(idbody);
     var Tr=document.createElement("tr"); 
     var Td=document.createElement("td");
    TBody.appendChild(Tr);
    Tr.appendChild(Td);
    Td.id='aff'+idtr;
    Td.colspan=2;
    }

  15. #15
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    sinon
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Td.setAttribute('colspan','2')
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. alterner les couleurs dans un tableau avec xsl
    Par Eithelgul dans le forum XSL/XSLT/XPATH
    Réponses: 14
    Dernier message: 03/05/2015, 23h29
  2. Alternative à getElementById ?
    Par G3offr3y dans le forum Général JavaScript
    Réponses: 23
    Dernier message: 09/07/2010, 09h33
  3. Alternative au dbms_output ?
    Par dam1311 dans le forum Oracle
    Réponses: 10
    Dernier message: 24/11/2004, 08h11
  4. Alternative(s) a CVS
    Par MrSimon dans le forum SCM
    Réponses: 3
    Dernier message: 06/03/2004, 11h37
  5. [FORMATION] Formations par alternance
    Par chobol dans le forum Etudes
    Réponses: 10
    Dernier message: 20/02/2004, 11h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo