begin process at 2012 02 14 09:09:14
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Créer cellule td dans un tableau html


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Créer cellule td dans un tableau html

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ée 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 Supprime toujours la dernière ligne du tableau ? [ par alaska749 ] Bonsoir, J'ai ré-adapté un code trouvé afin qu'il m'initialise et me crée à chaque appel de la fonction, un tableau dynamique en fonction d'une chain Ajout/suppression d'un champ input type -> Problème de récupération du tableau $_POST [ par alaska749 ] Bonjour, j'ai récupérer le script js ci-dessous permettant d'ajouter ou supprimer des input type text... ce script fonctionnne très bien mais je n'arr Parcours d'un tableau en JS [ par Canyata ] Bonjour à tous [^^happy17] J'ai une question à vous poser. J'ai un tableau en HTML sur ma page: [code=php]echo""; echo""; echo""; echo""; changer l'image d'une cellule d'un tableau au passage de la souris sur le ligne [ par lezj ] bonjour à toutes et à tous. je suis handicapé dans une application par un petit problème: j'ai un tableau généré dynamiquement (par un foreach php Suppression de lignes ajoutées, dans un tableau [ par ju0123456789 ] Bonjour, Tout d'abord désolé si je ne suis pas dans le bon sujet. Ensuite, J'ai un tableau par défaut avec 3 lignes. J'ai créé un bouton qui en créé Suppression d'une ligne d'un tableau js [ par alaska749 ] Bonsoir, Après avoir souffert pour créer une simple table dynamique en javascript, je doit maintenant pouvoir supprimer n'aimporte quelle ligne de ce Demande aide pour optimiser algo insertion cellule tableau [ par Jarod1980 ] Bonjour,Je voudrais savoir si quelqu'un pourrait m'aider à optimiser mon algo d'ajout d'une ligne dans un tableau. Mon algo marche pour un tableau qui Comment colorier plusieurs cellules d'un tableau [ par Jarod1980 ] Bonjour,Je voudrais si quelqu'un pourrait m'aider à optimiser mon algo de coloriage de cellule d'un tableau. J'arrive à colorier une et seule cellule Probleme setAttribute dans une table dynamique [ par ShivaanKeldon ] Bonjour J'ai créé un petit outil de comptage de points pour le tarot, en javascript. le calcul en lui meme fonctionne très bien, mais c'est au niveau


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,543 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales