[DOM] Modification tableau plus ajout colonne.

Version imprimable

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:

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:

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:

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:

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:

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.

29/11/2007, 17h37
le_chomeur

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
29/11/2007, 17h39
Shandler

Sauf que pour un des choix il y a une cellule en plus et sinon le titre des champ change.

Merci
29/11/2007, 23h01
bigboomshakala

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.
30/11/2007, 11h17
Shandler
Jai pensé créé mon tableau et grace a des id dans les titres des tableau je change le texte grace a ca :
Code:

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.
30/11/2007, 14h36
Shandler

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.

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:

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:

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>

30/11/2007, 18h01
bigboomshakala

Citation:

Envoyé par bigboomshakala

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
30/11/2007, 19h22
Shandler

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
01/12/2007, 12h06
Shandler

Personne n'aurai une idée pour faire marche ce script avec les bouton radio ?

Merci de votre aide.
02/12/2007, 01h26
bigboomshakala

Citation:

Envoyé par Shandler

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 :roll:. 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...
02/12/2007, 19h28
Shandler

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

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:

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>

03/12/2007, 12h22
Shandler

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.