Créer cellule td dans un tableau html

Question

Sujet Précédent Sujet Suivant

Créer cellule td dans un tableau html

Résolu

cs_mike1310

Messages postés: 232
Date d'inscription: jeudi 30 août 2007
Statut: Membre
Dernière intervention: 31 juillet 2009

- 24 sept. 2008 à 17:32
cs_mike1310

Messages postés: 232
Date d'inscription: jeudi 30 août 2007
Statut: Membre
Dernière intervention: 31 juillet 2009

- 25 sept. 2008 à 09:58

Bonjour,

J'ai un probleme de compatibilité entre IE et Mozilla (le truc super rare !!! ).
Mon probleme lors d'un clic, sur un bouton, je dois pouvoir ajouter des ligne dans un tableau html. Ca marche niquel sous mozilla mais pas sous IE... Ennuyant quand meme :

            var tableau = document.getElementById('montab');
        var ligne = document.createElement("tr");
            var cellule = document.createElement("th");
            Element.setStyle(cellule, {width: "20px"});
            var cellule2 = document.createElement("td");
            var texte = document.createTextNode("tu tres joli texte");
            var num = document.createTextNode(tableau.getElementsByTagName("tr").length);
            cellule.appendChild(num);
            ligne.appendChild(cellule);
            cellule2.appendChild(texte);
            ligne.appendChild(cellule2);
            tableau.appendChild(ligne);

Si quelqu'un voit une soluce je suis super preneur ...

A voir également:

Créer cellule td dans un tableau html
Créer une pagination pour un tableau HTML synamique (code behind) ✓ - Forum - ASP.NET
Javascript :Cellule dynamique d'un tableau HTML ✓ - Forum - Javascript / DHTML
Créer un tableau html en php - Conseils pratiques - PHP
ASP / ASP.NET : Asp.net - créer un tableau html dynamiquement à partir du code behind - Guide
Créer un tableau html en php... avec une subtilité ! ✓ - Forum - PHP

4 réponses

Réponse 2 / 4

Zobibol

Messages postés: 469
Date d'inscription: mercredi 9 janvier 2002
Statut: Membre
Dernière intervention: 20 février 2017

6
24 sept. 2008 à 17:45

Salut c'est un tout petit problème de tbody non présent. FF passe outre mais pas ie

voilà mon essais :
<html>
    <head>

        <title></title>
        <script>
        function addLine(){
                var tableau = document.getElementById('montab');
                var ligne = tableau.insertRow(-1);
            var cellule = ligne.insertCell(-1);
            cellule.style.width= "20px";
            var cellule2 = document.createElement("td");
            var texte = document.createTextNode("tu tres joli texte");
            var num = document.createTextNode(tableau.getElementsByTagName("tr").length);
        cellule.appendChild(num);
        ligne.appendChild(cellule);
        cellule2.appendChild(texte);
        ligne.appendChild(cellule2);
    }
        </script>
    </head>







</html>

marche sur IE et FF.
j'ai juste supprimé l'appel à Element.setStyle(cellule, {width: "20px"});
parce que je voulais pas inclure prototype ;o)

[o-_-o]

Réponse 3 / 4

cs_mike1310

Messages postés: 232
Date d'inscription: jeudi 30 août 2007
Statut: Membre
Dernière intervention: 31 juillet 2009

24 sept. 2008 à 17:51

Merci de ta réponse aussi rapide mais j'ai deja un tbody dans mon tableau... Je te donne tous mon code si ça peux te parler :

JS:
function addJoueur(joueur,equipe)
    {
            var tableau = $('equipe' + equipe);
            var ligne = document.createElement("tr");
            var cellule = document.createElement("th");
            var cellule2 = document.createElement("td");
            var texte = document.createTextNode(joueur);
            var num = document.createTextNode($('equipe'+equipe).getElementsByTagName("tr").length);
            cellule.appendChild(num);
            ligne.appendChild(cellule);
            cellule2.appendChild(texte);
            ligne.appendChild(cellule2);
            tableau.appendChild(ligne);
    }

HTML:

<form action="" method="POST" style="width:400px;height:765px;margin-left:10px;float:left;">
                                    ----

                        ,
                        Equipe 1,
                        Equipe 2,
                        Equipe 3,
                        Equipe 4,
                        Repos,

                    {foreach key=key item=item from=$joueur}
                        ----

                            {$item.nom} {$item.prenom},
                            ,
                            ,
                            ,
                            ,
                            ,

                    {/foreach}





            </form>





                        ----

                            EQUIPE 1 |









                        ----

                            EQUIPE 2 |








Sachant que j'utilise smarty c'est normal que tu vois des trucs comme { }

Mais la je calle vraiement

Réponse 4 / 4

cs_mike1310

Messages postés: 232
Date d'inscription: jeudi 30 août 2007
Statut: Membre
Dernière intervention: 31 juillet 2009

25 sept. 2008 à 09:51

Bon alors en fait j'ai isolé mon problème :

le souci vient de cette ligne :

            var tableau = document.getElementById('equipe'+equipe);
            var ligne = document.createElement("th");
            var cellule = document.createElement("th");
            cellule.style.width= "20px";
            var cellule2 = document.createElement("td");
            var texte = document.createTextNode(joueur);
            var num = document.createTextNode(tableau.getElementsByTagName("tr").length-1);
            cellule.appendChild(num);
            ligne.appendChild(cellule);
            cellule2.appendChild(texte);
            ligne.appendChild(cellule2);

si je la remplace par : var ligne = tableau.insertRow(-1); et bien ça fonnctionne ... si quelqu'un a une explication je suis bien preneur

Répondre Posez votre question

cs_mike1310 · Accepted Answer · 2008-09-25T09:58:30+0200

J'ai trouvé ma solution ... en fait il fallait créer également à la main un tbody et l'attribué au tableau :

            var tableau = document.getElementById('equipe'+equipe);
            var tbody = document.createElement("tbody");
            var ligne = document.createElement("tr");
            var cellule = document.createElement("th");
            cellule.style.width= "20px";
            var cellule2 = document.createElement("td");
            var texte = document.createTextNode(joueur);
            var num = document.createTextNode(tableau.getElementsByTagName("tr").length);
            cellule.appendChild(num);
            ligne.appendChild(cellule);
            cellule2.appendChild(texte);
            ligne.appendChild(cellule2);
            tbody.appendChild(ligne);
            tableau.appendChild(tbody);

Votre réponse