Ajout/duplication de ligne à un tableau
Bonjour,
J'aurais besoin d'un peu d'aide pour une fonctionnalité que je découvre et que je souhaiterais pousser un peu plus loin, l'ajout/duplication de ligne dans un tableau.
Histoire de mettre un peu de challenge, je précise que je souhaite que cela fonctionne sous IE8 :mrgreen:
A l'heure actuelle, mon test "simpliste" fonctionne bien et consiste à dupliquer une ligne déjà existante dans le tableau initial :
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
30
31
32
33
34
35
36
37
38
39
40
41
42
| <html>
<head>
<title>Tableau dynamique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaScript">
function dupliquerLigne(wId, wNum){
/*wId: identifiant du tableau*/
/*wNum: N° de la ligne à dupliquer*/
var wTable=document.getElementById(wId);
wTable.insertRow(-1);
for(var wI=0;wI<wTable.rows[wNum].cells.length;wI++){
wTable.rows[wTable.rows.length-1].insertCell(-1);
wTable.rows[wTable.rows.length-1].cells[wI].innerHTML=wTable.rows[wNum].cells[wI].innerHTML;
}
}
</script>
</head>
<body>
<p>
<button type="button" onclick="dupliquerLigne('table1', 0)">Dupliquer la ligne 1</button>
<button type="button" onclick="dupliquerLigne('table1', 1)">Dupliquer la ligne 2</button>
<button type="button" onclick="dupliquerLigne('table1', 2)">Dupliquer la ligne 3</button>
</p>
<table id="table1" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> <input type="text" value="Ma valeur A1" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur A2" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur A3" size="32" maxlength="64"></td>
</tr><tr>
<td> <input type="text" value="Ma valeur B1" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur B2" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur B3" size="32" maxlength="64"></td>
</tr><tr>
<td> <input type="text" value="Ma valeur C1" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur C2" size="32" maxlength="64"></td>
<td> <input type="text" value="Ma valeur C3" size="32" maxlength="64"></td>
</tr>
</table>
</body>
</html> |
Je souhaiterais dans un premier temps :
- placer les boutons "dupliquerLigne" à la fin de chaque ligne (avec un 4e <TD> sur chaque ligne) : ce bouton doit permettre de dupliquer la ligne sur laquelle il est (la ligne étant toujours ajoutée à la fin)
- En option, placer un second bouton "nouvelleLigne", qui dupliquerait la ligne mais viderait le contenu des champs <input> (la ligne étant également ajoutée à la fin)
- Que ces boutons permettent de dupliquer le style CLASS="..." des <TR> et <TD> et le NOWRAP
Dans un second temps :
- garder ces boutons d'ajout et duplication, mais faire en sorte qu'ils arrivent à gérer l'incrémentation les NAME et ID, qui sont identiques mais de format peu sympathique (la ligne s'ajoutant à la fin, il faut donc récupérer l'ID de la dernière ligne...)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <TR>
<TD><INPUT ... NAME="_1_1_29_1_40_1" ID="_1_1_29_1_40_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_1_41_1" ID="_1_1_29_1_41_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_1_42_1" ID="_1_1_29_1_42_1" ...></TD>
</TR>
<TR>
<TD><INPUT ... NAME="_1_1_29_2_40_1" ID="_1_1_29_2_40_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_2_41_1" ID="_1_1_29_2_41_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_2_42_1" ID="_1_1_29_2_42_1" ...></TD>
</TR>
<TR>
<TD><INPUT ... NAME="_1_1_29_3_40_1" ID="_1_1_29_3_40_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_3_41_1" ID="_1_1_29_3_41_1" ...></TD>
<TD><INPUT ... NAME="_1_1_29_3_42_1" ID="_1_1_29_3_42_1" ...></TD>
</TR> |
J'ai beau essayer de faire ça étape par étape, je suis un peu dépassé. Je pense que je suis obligé de mettre un ID au <TR>, mais je ne parviens pas à l'exploiter.
Je suis ouvert à revoir complètement ma fonction JS initiale si c'est nécessaire :)
Merci pour votre aide,
Guillaume
