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 :

créer table dans div


Sujet :

JavaScript

  1. #1
    Inactif  
    Inscrit en
    Avril 2005
    Messages
    750
    Détails du profil
    Informations forums :
    Inscription : Avril 2005
    Messages : 750
    Points : 498
    Points
    498
    Par défaut créer table dans div
    Bonjour,

    J'ai une page html qui contient un div et je voudrais rajouter dans ce div une table de cette forme :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table class="errors"><tr><td><b>blablabla<br/></b></font></td></tr></table><br>
    Je m'y prend de la manière suivante mais cela ne fonctionne pas.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    var divErrors = document.getElementById("errors");
    var tbl = document.createElement("table");
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var cellText = document.createTextNode(message);
    cell.appendChild(cellText);
    row.appendChild(cell);
    tbl.appendChild(row);
    divErrors.appendChild(tbl);
    ma div reste vide.

    Voici comment se présente la div dans le fichier :

    <div id="errors">

    </div>

    Merci de l'aide.

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    et en utilisant les méthodes réservées aux tables (insertRow, insertCell) comme indiqué dans la FAQ ?

    A+

  3. #3
    Inactif  
    Inscrit en
    Avril 2005
    Messages
    750
    Détails du profil
    Informations forums :
    Inscription : Avril 2005
    Messages : 750
    Points : 498
    Points
    498
    Par défaut
    Salut merci de ta réponse, mais l'élément table n'est pas non plus créé. Dans la faq on ajoute une ligne a une table qui existe déja.
    Mon createElement("table") lui ne fonctionne pas.

  4. #4
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Points : 2 757
    Points
    2 757
    Par défaut
    hmm pourtant ça devrait

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 141
    Points
    11 141
    Par défaut
    bonjour,

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
      var c = document.getElementById("errors");
      var tab, ligne, cellule;
     
      tab = document.createElement("table");
      tab.border = "1";
     
      ligne = tab.insertRow(-1);
      cellule = ligne.insertCell(0);
      cellule.innerHTML = "blabla";
     
      c.appendChild(tab);

  6. #6
    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 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1

  7. #7
    Inactif  
    Inscrit en
    Avril 2005
    Messages
    750
    Détails du profil
    Informations forums :
    Inscription : Avril 2005
    Messages : 750
    Points : 498
    Points
    498
    Par défaut Style CSS
    Bonjour, et merci pour votre aide cela fonctionne maintenant. J'aurai par contre une autre question, comment appliquer un style css de class errors dynamiquement ?
    Voici le style a appliquer :

    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
     
    background-color: #E4E7F7;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #e00000;
    	background: #FFFFFF;
    	width: 100%;
    	text-align: left;
    	margin: 2px;
    	padding: 2px 2px;
     
    	border-top-width: 2px;
    	border-right-width: 2px;
    	border-bottom-width: 2px;
    	border-left-width: 2px;
    	border-top-style: double;
    	border-right-style: double;
    	border-bottom-style: double;
    	border-left-style: double;
    	border-top-color: #e00000;
    	border-right-color: #e00000;
    	border-bottom-color: #e00000;
    	border-left-color: #e00000;
    	vertical-align: middle;

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    dans le fichier css ne convient pas ?

  9. #9
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par Bovino Voir le message
    dans le fichier css ne convient pas ?
    +1

    Puis, si c'est pour l'attribuer en JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('id_element').className="errors";
    A+

  10. #10
    Inactif  
    Inscrit en
    Avril 2005
    Messages
    750
    Détails du profil
    Informations forums :
    Inscription : Avril 2005
    Messages : 750
    Points : 498
    Points
    498
    Par défaut
    j'ai bien une class errors dans ma css, j'ai rajouté l'attribut class="errors" à ma table que j'ai créer via javascript, mais la css ne s'applique pas dynamiquement. Il faut recharger la page si on veut que la css agisse, il me semble. En tout cas la elle ne s'applique pas lorsque je test.

  11. #11
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par david06600 Voir le message
    j'ai bien une class errors dans ma css, j'ai rajouté l'attribut class="errors" à ma table que j'ai créer via javascript, mais la css ne s'applique pas dynamiquement. Il faut recharger la page si on veut que la css agisse, il me semble. En tout cas la elle ne s'applique pas lorsque je test.
    Ah, ben peut être, mais sans le code que tu utilises, on peut pas dire grand chose ....

    A+

  12. #12
    Inactif  
    Inscrit en
    Avril 2005
    Messages
    750
    Détails du profil
    Informations forums :
    Inscription : Avril 2005
    Messages : 750
    Points : 498
    Points
    498
    Par défaut
    Voici le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    var divErrors = document.getElementById("errors");
    var tbl = document.createElement("table");
    var row = tbl.insertRow(-1);
    var cell = row.insertCell(0);
    cell.innerHTML = "blablabla";
    divErrors.appendChild(tbl);
    tbl.setAttribute("class", "errors");
    Je voudrais pouvoir ajouter le style css errors dans la création de ma table. Est-ce possible ?

    Merci

  13. #13
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Au lieu de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tbl.setAttribute("class", "errors");
    donne un id à ta table et utilise plutôt
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('id_table').className="errors";
    A+

  14. #14
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 141
    Points
    11 141
    Par défaut
    ou encore :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     
    tabl.className = "errors"; // précise le nom de la classe avant de faire appendChild()
     
    divErrors.appendChild(tbl);

  15. #15
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Points : 2 757
    Points
    2 757
    Par défaut
    si tu veux utiliser setAttribute il me semble qu'il faut écrire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tbl.setAttribute("className", "errors");
    IE requiert className ici, les autres nav acceptent className et class

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

Discussions similaires

  1. [CSS 2.1] Table dans Div
    Par Raz-X dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/02/2012, 06h12
  2. Créer Table dans une base access fractionnée
    Par arnaucobra dans le forum Access
    Réponses: 2
    Dernier message: 22/11/2006, 20h50
  3. Pb table dans div avec style sur le texte
    Par snoop dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 23/06/2006, 10h07
  4. [DOM] DOM avec <table> dans <div>
    Par mavvv dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/02/2006, 15h53
  5. Comment créer une Table dans 1 Bdd ACCESS avec Builder??
    Par makandja dans le forum C++Builder
    Réponses: 6
    Dernier message: 17/03/2004, 20h21

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