Discussion :

[FrankOVD]

[Testé avec Google Chrome 5.0.375.99]

Bonjour,

J'ai une liste d'employé placée dans un tableau. Pour chaque ligne, un employé, pour chaque colonne une information sur l'employé. Afin de rendre chaque ligne modifiable et pour pouvoir utiliser les fonctionnalités "reset" et "submit" des formulaires, j'ai transformé chaque ligne en formulaire. Ma dernière colonne contient des boutons d'action.

Dans mon source HTML, une ligne ressemble à ceci :

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
 
<tr id_employe="56">
  <form action="#" method="post" onsubmit="E_save_employe(this.parentNode); return false;">
    <td>[...]</td>
    <td><input name="nom" type="text" value="FOO"></td>
    <td><input name="prenom" type="text" value="bar"></td>
    <td>[...]</td>
    <td><input name="matricule" type="text" value="123"></td>
    <td>
      <button type="submit" style="cursor: pointer; ">
        <img src="img/savedisabled.gif" border="0">
      </button>
      <button type="reset" style="cursor: pointer; ">
        <img src="img/annuler.png" border="0">
      </button>
      <img src="img/supprimer.png" border="0" onclick="E_delete_employe(this.parentNode.parentNode)" style="margin-left: 3px; margin-top: 1px; cursor: pointer; ">
    </td>
  </form>
</tr>

Au début de mon formulaire, j'ai une ligne vierge servant à l'ajout qui est sensiblement la même que les autres. Une fois que mon formulaire d'ajout est soumis, je clone donc cette ligne pour l'ajouter à la fin de ma liste :

Code :

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

1
2
3
4
 
var o = $("TABLE.liste TR:nth-child(2)");
var n = $(o).clone();
$("TABLE.liste").append(n);

Le problème, c'est que le résultat ne ressemble pas vraiment à un clone. En fait, l'inspecteur d'élément de Google Chrome interprète le code HTML que j'ai écrit plus haut ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<tr id_employe="56">
  <form action="#" method="post" onsubmit="E_save_employe(this.parentNode); return false;"></form>
    <td>[...]</td>
    <td>[...]</td>
    <td>[...]</td>
    <td>[...]</td>
    <td>[...]</td>
    <td>[...]</td>
</tr>

Cela ne pose aucun problème pour le code interprété au chargement mais, suite au clonage de mon élément, le résultat ressemble à une ligne où on aurait ajouté une colonne de trop au début, comme si la balise form était devenu un TD. L'inspecteur d'élément de Google Chrome ne présente cependant aucune différence entre cette nouvelle ligne et la ligne originale.

J'ai alors tenté de prendre toutes les cellules de ma ligne et de les réinsérer dans mon formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
...
var o = $("TABLE.liste TR:nth-child(2)");
var n = $(o).clone();
$("TABLE.liste").append(n);
var td = $("TD", n).detach();
var frm = document.createElement("form");
$(frm).attr("action", "#");
$(frm).attr("method", "post");
$(frm).submit( function() { E_save_employe(this.parentNode); return false; });
$(n).append(frm);
$(frm).append(td);
...

Cependant, malgré que l'inspecteur d'élément m'affiche un code en touts points pareil au code HTML initial, toutes mes cellules s'affichent comme le contenu de la première cellule de la ligne incarnée par le form. Laissant donc une première colonne démesurément large et cinq colonnes vides dans ma ligne...

Je suppose que je fais quelque chose qu'il ne faut pas dans la manipulation ou dans la déclaration de ma ligne et/ou de mon formulaire. Quelqu'un a une petite idée?

[danielhagnoul]

Bonsoir.

Exemple :

Code :

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

$("table.liste > tbody > tr:first").clone().appendTo("table.liste");

Le problème vient de l'emplacement de la balise form, elle ne peut pas se trouver dans un tr !