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 :

[DOM] Modification tableau plus ajout colonne.


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut [DOM] Modification tableau plus ajout colonne.
    Bonjour,

    Jai un probléme que je vais essayer de vous expliquer en esperant trouvé de l'aide.

    Donc voila jai un formulaire et a l'interieur de ce formulaire jai un tableau de ce type.

    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
     
       <table>
            <tr>
              <th>Titre &eacute;v&agrave;nement (Ex : Concert rock)</th>
              <th>&Eacute;tablissement ou lieu</th>
              <th>Adresse</th>
              <th>Ville</th>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>g</td>
            </tr>
          </table>
    Mais voila dans ce meme formulaire avant ce tableau jai des boutons radio qui suivant celui sélectionné mon tableau ci-dessus change de 3 facon differente.

    Bouton radio
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
          <input type="radio" name="evenement" id="evenement1" value="1" />
          <input type="radio" name="evenement" id="evenement2" value="2"  />
          <input type="radio" name="evenement" id="evenement3" value="3"  />
    Donc quand je sélectionne le :

    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
    Bouton evenement1 : le tableau doit resembler a ca
     
       <table>
            <tr>
              <th>Titre &eacute;v&agrave;nement (Ex : Concert rock)</th>
              <th>&Eacute;tablissement ou lieu</th>
              <th>Adresse</th>
              <th>Ville</th>
              <th>date</th>
            </tr>
            <tr>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
            </tr>
          </table>
    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
    Bouton evenement2 : le tableau doit resembler a ca
     
       <table>
            <tr>
              <th>Titre &eacute;v&agrave;nement</th>
              <th>&Eacute;tablissement ou lieu</th>
              <th>Telephone</th>
              <th>Ville</th>
            </tr>
            <tr>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
            </tr>
          </table>
    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
    Bouton evenement3 : le tableau doit resembler a ca
     
       <table>
            <tr>
              <th>Reuinion</th>
              <th>&Eacute;tablissement ou lieu</th>
              <th>Telephone</th>
              <th>Adresse</th>
            </tr>
            <tr>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
              <td><input type=texte /></td>
            </tr>
          </table>
    Et le petit truc en plus aprés avoir afficher ce tableau je doit pouvoir ajouter ou supprimer des colonnes du tableau affiché grace un lien qui fera office de bouton + et un autre pour le bouton -

    Merci beaucoup de votre aide et de vos lumiéres.

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    heu la comme ça a froid ==> le dom est ton amis ...

    SI il y a un nombre identique de cellule par ligne tu peu faire un truc dans le genre :

    nombredecelule = premièreligne.nbdecellule
    tu parcours le nombre de LIGNE de ton tableau
    et a chaque ligne tu ajoutes une cellule ...

    voila l'algo très rapide , il y a un bon gros bout de code pour faire ceci ...

    Bon courage

  3. #3
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Sauf que pour un des choix il y a une cellule en plus et sinon le titre des champ change.

    Merci

  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 : 45
    Localisation : France, Val de Marne (Île de France)

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    renseigne toi sur les <colgroup> et les <col>, ou sinon change directement le style des cellules (mais bon dans ton cas l'utilisation des <col> te faciliterait la vie).
    tu crées une table avec toutes les colonnes et tu les masques/affiches suivant les besoins.

  5. #5
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Jai pensé créé mon tableau et grace a des id dans les titres des tableau je change le texte grace a ca :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    longueurCible = document.getElementById("change_titre").firstChild.length;
    document.getElementById("change_titre").firstChild.replaceData(0, longueurCible, "Other titre");
    Mais voila je bloque car dans un des cas je dois rajouter une colonne a ce tableau et aussi pr l'ajout de ligne c'est assez galére.

    Merci pour votre aide.

  6. #6
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Jai une autre idéé si quelqu'un pourrait m'aider car voila je vais mettre met 3 types de tableau sur la page et les faire apparaitre suivant quelle bouton choisi mais comment faire cela ?

    Merci a vous.

  7. #7
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Bonjour a tous,

    Donc en faite j'ai entouré mais tableau avec des div pour les faire disparaitre quand j'en ai pas besoin, jai bien un code pour faire disparaitre un div mais ca ne marche pas avec mes bouton radio et je voie pas ce qui bloque merci de votre aide.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
          function effacer(monId)
          {
            var monElement = document.getElementById(monId);
     
            if(monElement.style.display == 'none')
            {
              monElement.style.display = 'block';
            }
            else
            {
              monElement.style.display = 'none';
            }
          }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
          <input type="radio" value=""/>Div 1
          <input type="radio" value=""/>Div 2
          <input type="radio" value=""/>Div 3
     
          <div id="div1"><table></table></div>
          <div id="div2"><table></table></div>
          <div id="div3"><table></table></div>

  8. #8
    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 : 45
    Localisation : France, Val de Marne (Île de France)

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    Citation Envoyé par bigboomshakala Voir le message
    renseigne toi sur les <colgroup> et les <col>, ou sinon change directement le style des cellules (mais bon dans ton cas l'utilisation des <col> te faciliterait la vie).
    tu crées une table avec toutes les colonnes et tu les masques/affiches suivant les besoins.
    au cas où ce serait passé inaperçu

  9. #9
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Non j'avais bien vue mais je pense que cacher mes tableau est plus simple mais j'arrive pas a adapté mon script.

    Voir plus haut pour le script merci pour ton aide

  10. #10
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Personne n'aurai une idée pour faire marche ce script avec les bouton radio ?

    Merci de votre aide.

  11. #11
    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 : 45
    Localisation : France, Val de Marne (Île de France)

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    Citation Envoyé par Shandler Voir le message
    Non j'avais bien vue mais je pense que cacher mes tableau est plus simple mais j'arrive pas a adapté mon script.

    Voir plus haut pour le script merci pour ton aide
    moi je dis ça je dis rien. avec un basculement du display sur un <col> ou directement sur les cellules c'est plié en 3 minutes . la difficulté (ou plutôt l'absence de difficulté) est la même que pour afficher/masquer des tableaux entiers comme tu le suggères. et il n'y a aucun intérêt à dupliquer un tableau (et donc les données) uniquement pour donner l'impression d'ajouter, supprimer ou modifier des colonnes alors que pour un coup moindre on peut effectivement agir sur une unique instance du tableau.
    j'ai "un peu" utilisé ces techniques en milieu professionnel, donc je connais. j'ai du faire exactement ce que tu cherches à faire il y a peu de temps. mais bon puisque ce n'est pas une solution qui te convient...

  12. #12
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Je suis preneur pour n'importe quelle solution du moment qu'elle marche mais comme je suis pas trés doué en javascript je ne voie pas trop avec les col donc si tu pouvais m'aider la dessus je serais ravi merci a toi

  13. #13
    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 : 45
    Localisation : France, Val de Marne (Île de France)

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    bon ben si tu débutes je vais sans colgroup. simple mais efficace en changeant le display des cellules. dan ton cas il faut changer le bouton par des radios, et modifier un peu la fonction toggle pour que dans un cas ça serve touijours à afficher et dans l'autre toujours à masquer

    le principe est simple. tu récupères ton tableau en javascript, tu parcoures les lignes et les cellules pour modifier la propriété qui t'intéresse. en l'occurence le display.

    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
     <html>
    <head>
    <script>
    function toggle()
    {
     var table = document.getElementById('toto');
     for (var i=0;i<table.rows.length; i++)
       table.rows[i].cells[1].style.display = table.rows[i].cells[1].style.display=='none' ? 'block':'none';
    }
    </script>
    </head>
    <body>
     <table id='toto'>
      <tr>
       <td>Titre événement (Ex : Concert rock)</td>
       <td>établissement ou lieu</td>
       <td>Adresse</td>
       <td>Ville</td>
      </tr>
      <tr>
       <td>a</td>
       <td>b</td>
       <td>c</td>
       <td>g</td>
      </tr>
     </table>
     <input type='button' value='Click here' onclick='toggle()' />
    </body>
    </html>

  14. #14
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Merci a toi bigboomshakala ca marche bien mais voila mon tableau ce complique un peut car deja y a des champ de type texte dans chaque case plus un a l'exterieur du tableau et qui change aussi donc je pense vraiment que attentouré mes tableau d'un div que je cache serait la solution la moin embetante mais voila mon script marche toujours pas avec les radio car si je sélectionne mon bouton radio 1 le div apparait bien mais si je change de bouton radio, le div du bouton 1 ne s'éfface pas et il reste sachant que le div du 2éme bouton sélectionné apparait aussi.

    Merci a toi.

Discussions similaires

  1. Afficher un tableau et ajouter colonne de choice list
    Par Sasuke1234 dans le forum Interfaces Graphiques
    Réponses: 1
    Dernier message: 16/12/2013, 17h43
  2. Supprimer,déplacer,ajouter colonne tableau html
    Par Shandler dans le forum jQuery
    Réponses: 22
    Dernier message: 03/04/2009, 10h37
  3. [MySQL] ajouter une colonne C à un tableau contenant 2 colonnes A et B
    Par sandrine74 dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 28/01/2009, 08h12
  4. Réponses: 1
    Dernier message: 12/12/2008, 17h06

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