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