Discussion :

[berlo44]

Bonjour,

J'ai un formulaire html assez complexe avec des tableaux imbriqués dont la taille peut varier avec des boutons javascript pour cloner / supprimer / ajouter / deplacer des lignes.

voilà un code simplifié de la page html :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table class="tab1">
 <tbody >
  <tr>
   <td>
    <input value="nom0" name="tab1[0][nom]">
    <input value="com0" name="tab1[0][com]">
    <tr>
     <td>
      <table  class="tab2">
      <tbody>
        <tr>
         <td>
          <input value="nom00" name="tab1[0][tab2][0][nom]">
          <input value="com00" name="tab1[0][tab2][0][com]">
          <table class="tab3">
           <tbody >
            <tr>
             <td><input value="nom000" name="tab1[0][tab2][0][tab3][0][nom]"></td>
             <td><select name="tab1[0][tab2][0][tab3][0][sz]"><option value="1">1</option><option selected="selected" value="2">2</option></select></td>
            </tr>
            <tr>
             <td><input value="nom000" name="tab1[0][tab2][0][tab3][1][nom]"></td>
             <td><select name="tab1[0][tab2][0][tab3][1][sz]"><option value="1">1</option><option selected="selected" value="2">2</option></select></td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
        <tr>
         <td>
          <input value="nom01" name="tab1[0][tab2][1][nom]">
          <input value="com01" name="tab1[0][tab2][1][co]">
          <table>
           <tbody>
            <tr>
             <td><input value="nom010" name="tab1[0][tab2][1][tab3][0][nom]"></td>
             <td><select name="tab1[0][tab2][1][tab3][0][sz]"><option value="1">1</option><option selected="selected" value="2">2</option></select></td>
            </tr>
            <tr>
             <td><input value="nom011"  name="tab1[0][tab2][1][tab3][1][nom]"></td>
             <td><select name="tab1[0][tab2][1][tab3][1][sz]"><option value="1">1</option><option selected="selected" value="2">2</option></select></td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>   
     </td>
    </tr>
   </td>
  </tr>
 </tbody>
</table>

Après action des boutons javascript il faut que je parcours le tableau pour redonner les bons indices au champs du formulaire.
Par exemple, si je clone une ligne, je me retrouve avec des noms en double, ce qui ne va pas au moment de l'envoie du formulaire.

Donc j'ai commencé à coder pour renommer, je peux renommer en utilisant des regexp par exemple :

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
 
...
var i=0;
while(i<nombrelignes) {
 if (nomclasstableau === "tab1") {
  elts = lignes[i].getElementsByTagName("input");
   for (j=0 ; j<elts.length; j++) {
    nomelementavant = elts[tab2].name;
    resultat = nomelementavant.search(/\[\d+\]/);
     if(resultat != -1) {
    nomelementapres = nomelementavant.replace(/\[\d+\]/,"\["+i+"\]")
   }
  }
 }
}

Dans mon formulaire je melange input et select.
J'ai également des inputs en readonly sans attribut name.

Comment selectionner pour une ligne de tableau donnée tout les elements du formulaire qui ont un attribut "name" ?
ou peut-être tout les noms commencant par "tab1[i]" ?

Enfin, si vous avez une meilleures idée, moins laborieuse, je suis à l'écoute.

merci

[berlo44]

bon, c'est pas la gloire avec ce post...

J'ai continué, mais je bloque toujours sur deux points :

1 - Comment combiner dans une seule collection deux collections d’éléments. par exemple les 2 collections suivante :
elts1 = lignes[i].getElementsByTagName("input")
elts2 = lignes[i].getElementsByTagName("select").
j'ai pas trouvé d'autre méthode pour sélectionner à la fois les inputs et les selects d'une ligne de tableau,

Une alternative serait de sélectionner les éléments qui ont l'attribut "name", mais je n'ai pas trouver non plus.

2 - Comment remplacer la deuxième ou troisième occurrence d'un regexp
par exemple :
tab1[0][tab2][0][nom]

[nadox]

Bonjour,

Pour la première question, il existe la méthode concat de l'objet Array :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var elt = lignes[i].getElementsByTagName("input").concat(lignes[i].getElementsByTagName("select"));

Pour les Expressions régulières, je passe la main aux "regexp's gouroux", j'avoue ne pas avoir le temps de fouiller la doc, et je n'en utilise pas souvent...

Sinon, tu pourrais peut-être utiliser un framework, surtout qu'il existe souvent pas mal de widget/plugins pourrait peut-être faire l'affaire ?

[javatwister]

ta structure (html en fait) est tout de même drôlement compliquée non?

comme on ne sait pas trop ce que tu fais avec ce "formulaire-tableau", ce serait pas mal d'avoir un aperçu de page; tu peux?

Après action des boutons javascript il faut que je parcours le tableau

je ne comprends pas trop le "après action";

[berlo44]

Oui la structure semble compliquée, c'est pour ça que j'en ai donné qu'une vue simplifiée. C'est 3 niveaux de tableaux imbriqués en fait. Mais la page est assez simple visuellement, et pour l'utilisateur c'est facilement compréhensible.

C'est une page qui est destiné à modifier un fichier de configuration de différentes vues (groupes) de graphiques contenant des séries de mesures. Il y a différentes vues possibles qui affichent chacune un ou plusieurs graphiques contenant chacun une ou plusieurs séries de mesures à afficher. C'est pour ça qu'il y'a trois niveaux de tableau.
Concrètement, avec l'exemple d'une maison, on décide de créer une vue (qui sera une page html) ou on décide de visualiser l'évolution des températures de la maison, cette vue contient un graphique pour chaque pièces de la maison, et pour chaque graphique on pourrait avoir plusieurs températures (sol, plafond, moyenne, etc). Puis après on créer une autre vue avec seulement les pièces du premier, une autre avec les pièces du second, etc...

Pour chaque niveau de tableau, les possibilités sont les mêmes. il y en a 4, c 'est des boutons qui exécutent un code javascript (ajouter, supprimer, déplacer, dupliquer). Par exemple on peut ajouter une vues à la liste des vues existantes, un graphique à la liste des graphiques d'une vue, une série à la liste des séries d'un graphique. Dans ce cas le js ajoute une ligne au tableau courant avec un "appendChild(newTr)".

Le formulaire renvoie un tableau (en php) de ces différentes vues, il est structuré pour être archivé dans mysql. C'est pour ça que le formulaire est sous forme de tableau.

Pour l'instant ça fonctionne bien, me reste plus qu'à solutionner cette histoire d'indexation du formulaire.
C'est mon premier code en js, je ne suis pas encore passer aux librairies....

à nadox, merci, je vais essayé, j'ai déjà tenté le concat, mais j'ai du me planter dans l’écriture...

[berlo44]

@nadox, j'ai une erreur avec ta solution.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elts = lignes[i].getElementsByTagName("input").concat(lignes[i].getElementsByTagName("select"));

firebug me dit : "lignes[i].getElementsByTagName("input").concat is not a function"

edit : trouvé pourquoi ça ne marche pas : concat ne fonctionne qu'avec les types string et array, elts est un object

[fab256]

Moi je pensais a une structure arborescente du genre TreeGrid ou bien le plugin jQuery treeTable

En ce qui concerne le formulaire, une capture écran nous aiderais a mieux comprendre le probleme (avec bouton supprimer, dupliquer, ajouter..etc)
Pour renomer, moi je vois plus une fonction récursive qui une fois le nom d'une branche changé, toute les branches-fils relié sont renomées, et les branches-freres suivantes et leurs branches-fils...etc

[berlo44]

ah non ce n'est pas du tout ça, ça se présente comme ça :
(les textes en bleu sont des inputs)

[fab256]

Et si par exemple tu travaillais seulement avec le DOM sans te casser la tete avec les noms et quand tu valider le tout, envoi ton tableau multi-dimension sous un format standars genre JSON.
Quand tu crée un element dynamiquement, quels sont les parametres que tu passe aux boutons supprimer de cet element?

[berlo44]

Je ne connais pas du tout la technique JSON/DOM. Là, je ne suis pas loin du but, ça m’ennuierai de tout recommencer. Mais, je me rend bien compte que l'étape suivante ça sera d'utiliser Jquery ou autre et d'autres choses plus modernes...

C'est l'emplacement du bouton qui compte j'utilise simplement onclick="supprimeLigne(this). l'action concerne le Tr ou se trouve le bouton, tout bêtement.

je ferais peut-être mieux de faire un autre sujet pour le pb de regexp..

[fab256]

Peut-tu nous donner le code que tu utilise pour cloner une ligne par exemple?

[fab256]

Sinon une autre idée c'est de ne pas donner de valeur name pour les differents input, select. Tu fait tes ajouts/suppression/clonage. Et avant de poster ton tableau, tu le parcours en renomant les branches selon la profondeur. C'est possible?

[berlo44]

On se disperse là non ?

mon pb à la base c'est de sélectionner à la fois les select et input contenu dans un tr dans une seule collection d'objets, soit par getElementsByTagName(), (mais ce n'est pas possible avec "concat"), soit avec selectByName.

Après y'a juste un pb de regexp pour changer les indices, mais faudrait mieux que je fasse un autre sujet plutôt.

Sinon, il y avait certainement mieux à faire, mais comme je l'ai dis plus haut c'est mes premiers code js, c'est pour ça que c'est un peu artisanal... mais ça fonctionne bien tout de même bien dans les différents navigateurs.

Par contre si vous avez un exemple de formulaire avec php/js/json ou par xlst je suis curieux de voir comment ça fonctionne.