Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : Créer cellule td dans un tableau html [ JavaScript et le navigateur / Problème de compatibilité ] (mike1310)

mercredi 24 septembre 2008 à 17:32:52 | Créer cellule td dans un tableau html

mike1310

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 ...

mercredi 24 septembre 2008 à 17:45:14 | Re : Créer cellule td dans un tableau html

Zobibol

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>
    <body>
        <table id="montab" >
            <tbody>
            </tbody>
        </table>
        <input type="button" value="add" onclick="addLine()" />
    </body>
</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]

mercredi 24 septembre 2008 à 17:51:56 | Re : Créer cellule td dans un tableau html

mike1310

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;">
                <table id="creationequipe">
                    <tr id="premiereligne" style="text-align:right">
                        <td></td>
                        <td>Equipe 1</td>
                        <td>Equipe 2</td>
                        <td>Equipe 3</td>
                        <td>Equipe 4</td>
                        <td>Repos</td>
                    </tr>
                    {foreach key=key item=item from=$joueur}
                        <tr>
                            <td style="text-align:right">{$item.nom} {$item.prenom}</td>
                            <td style="text-align:center"><INPUT type="radio" name="{$item.oid}" value="equipe1" onclick="addJoueur('{$item.nom} {$item.prenom}','1');"></td>
                            <td style="text-align:center"><INPUT type="radio" name="{$item.oid}" value="equipe2" onclick="addJoueur('{$item.nom} {$item.prenom}','2');"></td>
                            <td style="text-align:center"><INPUT type="radio" name="{$item.oid}" value="equipe3" onclick="addJoueur('{$item.nom} {$item.prenom}','3');"></td>
                            <td style="text-align:center"><INPUT type="radio" name="{$item.oid}" value="equipe4" onclick="addJoueur('{$item.nom} {$item.prenom}','4');"></td>
                            <td style="text-align:center"><INPUT type="radio" name="{$item.oid}" value="repos" checked="checked"></td>
                        </tr>
                    {/foreach}
                </table>
                <br>
                <input type="submit" name="enregistrer" value="Enregistrer" id="enregistrer" />
            </form>
            <div style="float:right;width:320px;margin:15px 0px 0px 0px;">
                <div style="float:left;width:150px;border:1px solid #a6a6a6;margin:0px 10px 0px 0px;">
                    <table id="equipe1" style="background-color:#eee;width:100%;border-collapse:collapse;">
                        <tbody>
                        <tr>
                            <th colspan="2" style="border-bottom:1px solid #a6a6a6;text-align:center;padding:3px;">EQUIPE 1</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div style="float:left;width:150px;border:1px solid #a6a6a6;">
                    <table id="equipe2" style="background-color:#eee;width:100%;border-collapse:collapse;">
                        <tbody>
                        <tr>
                            <th colspan="2" style="border-bottom:1px solid #a6a6a6;text-align:center;padding:3px;">EQUIPE 2</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

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

Mais la je calle vraiement

jeudi 25 septembre 2008 à 09:51:35 | Re : Créer cellule td dans un tableau html

mike1310

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

jeudi 25 septembre 2008 à 09:58:30 | Re : Créer cellule td dans un tableau html

mike1310

Réponse acceptée !
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);



Cette discussion est classé dans : ligne, tableau, var, cellule, document


Répondre à ce message

Sujets en rapport avec ce message

suppression ligne tableau [ par touriste80 ] BonjourJ'ai un ptit souci!! dans une colonne d'un tableau j'ai supprimé pour supprimer la ligne que je veux dans le tableau. chaque ligne rajoutée dan calendrier qui ne fonctionne pas [ par da vince ] Salut, I need some help...Pourquoi ça marche pas?J'ai pas de message d'erreur mais rien ne s'affiche dans le navigateur...PS: y-a-t-il moyen de joindr Javascript :Cellule dynamique d'un tableau HTML [ par danvy ] Bonjour a tous,voila je souhaite remplir les cellules de mon tableau suivant ce que l'on a choisi dans une liste deroulante.Mon code marche bien pour Variable modifiée alors que non concernée ?? [ par Evangun ] Bonjour à tous,encore un problème...j'ai déclaré mon tableaux "artistes".ensuite je veux en faire une copie : var expand_artistes_tab = artistes;ce no Problème d'affichage tableau dynamique sous FF [ par DMK04 ] Bonjour,Est-ce que quelqu'un pourrait me dire si il y a une erreur quelconque qui pourrait causer des problèmes d'affichage sous FireFox (alors que so Créer une ligne dans une table (en 1ere position) [ par lipao ] bonjour c'est tout bete, tout est dans le titre... je voudrais créer une ligne dans une table et qu'elle soit la 1ère ligne c'est à dire passer de DHTML fonctionne sous Firefox, Safari mais pas IE [ par durand2504 ] [Javascript] Gestion de liste et de nombre [ par Shirox ] Tous d'abord bonjour, et merci de vous être attarder sur ce sujet :) .Je m'excuse si le titre n'est pas très précis, mais je ne voyais pas trop comm pb avec <html:text [ par kalf2000 ] salut,en fait j'aimerai ajouter des lignes dynamiquement dans un tableau suivant le code trouvé sur ce forum :in1 = ""; var l = document.getE Petit souci avec les Dom [ par mikl74 ] Salut a tous, j'ai un petit problème avec un script utilisant les dom, en faite , je souhaite créer un tableau ou je peux ajouter des ligne grâce au


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version


HTC G1

Entre 449€ et 449€


Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,343 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.