Dupliquer un Tableau HTML
pk974
-
pk974 -
pk974 -
Bonjour,
Débutant en webmastering, je fait appel à vous .
Je precise que j'ai fait pas mal de recherche via des moteurs de recherches, avant de me trouner vers vous.
ma question est simple , je souaiterai creer un formulaire HTML qui contient un Tableau avec plusieurs champs vides qu 'on peut soit dupliquer ou supprimer en cliquant sur un bouton ajouter ou supprimer respectivement
<form action='titre.php' method='POST'>
<!-- debut du tableau -->
<table border='0' width='600'><tbody>
<tr><td>titre 1</td><td><input name='titre1' value='titre1'></td></tr>
<tr><td>titre2</td><td><input name='titre2' value='titre2'></td></tr>
<tr><td>titre3</td><td><input name='titre3' value='titre3'></td></tr>
</tbody></table>
<!-- fin du tableau -->
J'aimerai pouvoir creer un bouton "ajouter tableau" et "suprimer tableau" en Javascript , qui permet de cloner ce tableau à l identique à l 'infini et/ou supprimer le tableau si ce 2eme tableau n 'est pas necessaire par exemple.
Ces boutons "ajouter tableau" et supprimer tableau" devront etre present au dessous de chaque tableau créer.
j 'espère avoir été claire .
je compte sur vous pour me sortir de cette impasse.
d'avance merci .
pk974
Débutant en webmastering, je fait appel à vous .
Je precise que j'ai fait pas mal de recherche via des moteurs de recherches, avant de me trouner vers vous.
ma question est simple , je souaiterai creer un formulaire HTML qui contient un Tableau avec plusieurs champs vides qu 'on peut soit dupliquer ou supprimer en cliquant sur un bouton ajouter ou supprimer respectivement
<form action='titre.php' method='POST'>
<!-- debut du tableau -->
<table border='0' width='600'><tbody>
<tr><td>titre 1</td><td><input name='titre1' value='titre1'></td></tr>
<tr><td>titre2</td><td><input name='titre2' value='titre2'></td></tr>
<tr><td>titre3</td><td><input name='titre3' value='titre3'></td></tr>
</tbody></table>
<!-- fin du tableau -->
J'aimerai pouvoir creer un bouton "ajouter tableau" et "suprimer tableau" en Javascript , qui permet de cloner ce tableau à l identique à l 'infini et/ou supprimer le tableau si ce 2eme tableau n 'est pas necessaire par exemple.
Ces boutons "ajouter tableau" et supprimer tableau" devront etre present au dessous de chaque tableau créer.
j 'espère avoir été claire .
je compte sur vous pour me sortir de cette impasse.
d'avance merci .
pk974
A voir également:
- Dupliquer un Tableau HTML
- Dupliquer ecran - Guide
- Tableau word - Guide
- Trier un tableau excel - Guide
- Tableau ascii - Guide
- Dupliquer whatsapp - Guide
5 réponses
Bonjour,
En JavaScript il existe une série de méthodes permettant de cloner des balises (noeuds), de les modifier et le des ajouter n'importe où dans ton document. Je t'invite vivement à consulter ce site avant de lire la suite : http://fr.selfhtml.org/javascript/index.htm
Avant de commencer tu dois bien structurer ton document de sorte à obtenir un bloc qui contiendra le premier tableau ainsi que tous ceux que tu copieras.
Dans cet exemple, le bloc "tablesZones" sera ce que j'appelle le conteneur de tableaux. Ensuite je crée un nouveau bloc Span qui contiendra le tableau avec les boutons Ajouer et Supprimer. C'est donc ce bloc Span que tu devras dupliquer.
Etape 1 : Créer une fonction pour "copier" un bloc donné et l'ajouter à la suite du dernier tableau.
Etape 2 : On configure le bouton Ajouter pour appeler cette fonction de copie. Dans cet exemple j'ai supposé que le Span était le deuxième parent du bouton lui-même (this.parentNode.parentNode)... il existe d'autres techniques consistant à utiliser un identifiant incrémental par exemple, ce qui pourrait permettre une meilleure souplesse, mais restons-en là, j'ai choisi la méthode la plus courte tant barbare soit elle.
Ensuite vient l'écriture de la fonction de suppression à laquelle on donne le bloc à supprimer :
Et on configure aussi le bouton de suppression de la même façon.
Si tu assembles et lances cet exemple (qui fonctionne) tu t'apercevras que le premier tableau contient aussi le bouton Supprimer, ce qui n'est pas souhaitable... il nécessite donc encore d'une adaptation pour le qualifier d'opérationnel mais tu as maintenant tous les éléments en main pour comprendre le fonctionnement de la duplication de noeuds en DOM/Javascript.
Bon courage dans le monde du Web !
En JavaScript il existe une série de méthodes permettant de cloner des balises (noeuds), de les modifier et le des ajouter n'importe où dans ton document. Je t'invite vivement à consulter ce site avant de lire la suite : http://fr.selfhtml.org/javascript/index.htm
Avant de commencer tu dois bien structurer ton document de sorte à obtenir un bloc qui contiendra le premier tableau ainsi que tous ceux que tu copieras.
Dans cet exemple, le bloc "tablesZones" sera ce que j'appelle le conteneur de tableaux. Ensuite je crée un nouveau bloc Span qui contiendra le tableau avec les boutons Ajouer et Supprimer. C'est donc ce bloc Span que tu devras dupliquer.
<div id="tablesZone"> <span> <table> <tbody> <tr><td>titre1</td><td><input name='titre1' value='titre1'></td></tr> <tr><td>titre2</td><td><input name='titre2' value='titre2'></td></tr> <tr><td>titre3</td><td><input name='titre3' value='titre3'></td></tr> </tbody> </table> <p><span onclick="copyTable(this.parentNode.parentNode)">Copier</span> / <span onclick="deleteTable(this.parentNode.parentNode)">Supprimer</span></p> </span> </div>
Etape 1 : Créer une fonction pour "copier" un bloc donné et l'ajouter à la suite du dernier tableau.
function copyTable(tableBloc) { // tableBloc est le Span du tableau à copier
var container = tableBloc.parentNode; // On détermine la zone à laquelle ajouter le nouveau tableau (tablesZone)
var tableBlocCopy = tableBloc.cloneNode(true); // On copie le tableau
container.appendChild(tableBlocCopy); // On ajoute ce nouveau tableau dans le conteneur "tablesZone)
}
Etape 2 : On configure le bouton Ajouter pour appeler cette fonction de copie. Dans cet exemple j'ai supposé que le Span était le deuxième parent du bouton lui-même (this.parentNode.parentNode)... il existe d'autres techniques consistant à utiliser un identifiant incrémental par exemple, ce qui pourrait permettre une meilleure souplesse, mais restons-en là, j'ai choisi la méthode la plus courte tant barbare soit elle.
Ensuite vient l'écriture de la fonction de suppression à laquelle on donne le bloc à supprimer :
function deleteTable(tableBloc) {
tableBloc.parentNode.removeChild(tableBloc);
}
Et on configure aussi le bouton de suppression de la même façon.
Si tu assembles et lances cet exemple (qui fonctionne) tu t'apercevras que le premier tableau contient aussi le bouton Supprimer, ce qui n'est pas souhaitable... il nécessite donc encore d'une adaptation pour le qualifier d'opérationnel mais tu as maintenant tous les éléments en main pour comprendre le fonctionnement de la duplication de noeuds en DOM/Javascript.
Bon courage dans le monde du Web !
J'ai juste oublié de préciser qu'il me semble toutefois que l'attribut "name" fonctionne de la même façon que l'attribut "id", c'est à dire qu'il doit être unique au sein du même formulaire. Je ne sais pas comment ça réagit côté serveur quand on essaie de faire un $_GET() ou $_POST() si tu as 3 fois l'identifiant "titre1" (il prend le premier, le dernier, aucun, tous ?). Donc prudence, tu aurais peut-être dû préciser dans quel but tu voulais faire une chose pareille.
Hello pk974,
Avec plaisir si j'ai pu t'aider.
Pour répondre au doute levé, la première idée saine (je précise parce que les idées tordues ça me connait) qui me vient à l'esprit c'est de conserver tes attributs "name" comme tels mais en rajoutant une paire de crochets carrés à la fin [].
Si tu ne vois pas pourquoi je te propose cette solution je te suggère de chercher comment fonctionne le passage de checkbox en HTML/PHP. Chaque checkbox est un input portant le nom "choixCouleur[]" par exemple, ce qui aura pour effet d'envoyer au serveur un tableau de valeurs plutôt qu'une seule.
Donc en théorie si tu as deux name="titre1[]" et que du côté serveur tu fais $_GET("titre1") tu recevras en réalité un tableau de 2 éléments. Par contre si tu emploies cette méthode teste bien l'ordre dans lequel il créera ce tableau, c'est à dire que titre1[1] te donne le titre1 du second tableau et titre2[1] te donne le titre2 du second tableau également et pas du premier.
Voili voilou (moi aussi je dis souvent ça tiens :D)
Avec plaisir si j'ai pu t'aider.
Pour répondre au doute levé, la première idée saine (je précise parce que les idées tordues ça me connait) qui me vient à l'esprit c'est de conserver tes attributs "name" comme tels mais en rajoutant une paire de crochets carrés à la fin [].
Si tu ne vois pas pourquoi je te propose cette solution je te suggère de chercher comment fonctionne le passage de checkbox en HTML/PHP. Chaque checkbox est un input portant le nom "choixCouleur[]" par exemple, ce qui aura pour effet d'envoyer au serveur un tableau de valeurs plutôt qu'une seule.
Donc en théorie si tu as deux name="titre1[]" et que du côté serveur tu fais $_GET("titre1") tu recevras en réalité un tableau de 2 éléments. Par contre si tu emploies cette méthode teste bien l'ordre dans lequel il créera ce tableau, c'est à dire que titre1[1] te donne le titre1 du second tableau et titre2[1] te donne le titre2 du second tableau également et pas du premier.
Voili voilou (moi aussi je dis souvent ça tiens :D)
Merci beaucoup Posotaz,
Je me suis mis à la lecture .
Pour Répondre à ta question, il s'agit de créer un formulaire et insérer les données dans un base de donnée.
Ce genre de tableau serait utile pour récupérer plusieurs fois le même type d 'info s'il y a lieu .
voili voilou !!
Donc tu as raison il risque d 'avoir un problem pour la récupération des données si l'attribut "name" comporte le même nom.
saurais tu comment y remédier à ce problème ?
en tout cas merci encore.
Je me suis mis à la lecture .
Pour Répondre à ta question, il s'agit de créer un formulaire et insérer les données dans un base de donnée.
Ce genre de tableau serait utile pour récupérer plusieurs fois le même type d 'info s'il y a lieu .
voili voilou !!
Donc tu as raison il risque d 'avoir un problem pour la récupération des données si l'attribut "name" comporte le même nom.
saurais tu comment y remédier à ce problème ?
en tout cas merci encore.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question