Clonage ligne de tableau

Version imprimable

Bonjour,

Je souhaite cloner une ligne de tableau et l'insérer à la fin de ce dernier. Pour ce faire j'insère une ligne de tableau caché qui sera toujours présente (car l'utilisateur peut également supprimer une ligne).

Cette fonction javascript fonctionne correctement sous IE. En revanche sous firefox il m'insère la ligne dans un "td" et de ce fait crée un problème d'affichage du tableau (les lignes ajoutés sont compressées par rapport à la première ligne initialement présente)

Voyez vous d'ou peut venir l'erreur ??

voici mon javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var counter = 0;
function AjoutModalite() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField.name;
		if (theName){
			newField[i].name = theName + counter;
		}
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

le html:

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
43
44
45
46
47
48
49
50
51
52
 
		<table id="modaliteTable">
			<tr>
				<td></td>
				<td class="formulaireLink">
					<a onClick="AjoutModalite()" href="#">
						<%=UIFonctionnalite.getLabel("moAjouter", idComponent)%>
					</a>
				</td>
				<td></td>
			</tr>
 
			<tr>
				<td class="modaliteLabel1"><%=UIFonctionnalite.getLabel(intituleField.getName(), idComponent)%></td>
				<td class="modaliteLabel2"><%=UIFonctionnalite.getLabel(descriptionField.getName(), idComponent)%></td>
				<td></td>
			</tr>
 
			<tr id="readroot" style="display: none">
				<td class="modaliteComponent1">
					<%uicomponent.renderChild(intituleField.getName());%>
				</td>
				<td class="modaliteComponent2">
					<%uicomponent.renderChild(descriptionField.getName());%>
				</td>
				<td>
					<a onclick="DeleteRowModalite(this)" href="#">
						<div class="UICancelButton">&nbsp;</div>
					</a>
				</td>
			</tr>
 
			<tr>
				<td class="modaliteComponent1">
					<%uicomponent.renderChild(intituleField.getName());%>
				</td>
				<td class="modaliteComponent2">
					<%uicomponent.renderChild(descriptionField.getName());%>
				</td>
				<td>
					<a onclick="DeleteRowModalite(this)" href="#">
						<div class="UICancelButton">&nbsp;</div>
					</a>
				</td>
			</tr>
 
			<tr id="writeroot">
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

MERCI

19/05/2008, 11h06
le_chomeur

regarde par ici :
http://javascript.developpez.com/faq...ble#AjoutLigne
19/05/2008, 11h14
cbv38

Merci mais je ne peut pas utiliser cette fonction.
en effet mes composant (de type input) sont générés par java donc en utilisant cette fonction je perd la mise en forme (longueur de l'input). De plus si j'ajoute mon composent en prenant la mise en forme je perd en généricité...
19/05/2008, 11h18
SpaceFrog

Code:

var newField = newFields.childNodes;

:aie:

http://javascript.developpez.com/faq...M#DOMIEFirefox

http://www.developpez.net/forums/sho...d.php?t=475242
19/05/2008, 11h28
le_chomeur

non tu peux dans tous les cas appliqué le style a tes inputs , les class css etc :)

+1 spaffy
19/05/2008, 12h00
cbv38

->le_chomeur : je sais que l'on peut appliquer le style mais le souci c'est que je paramètre mes composants en java donc si j'en modifie un cela m'oblige à modifier le style css appliqué (un peu lourd :lol:)

->SpaceFrog : merci mais en appliquant le nodeCleaner sur mon tableau cela ne fonctionne toujours pas !!! 8O
19/05/2008, 12h05
SpaceFrog

sinon c'est pas inline-block pour un tr ?
19/05/2008, 13h29
cbv38

inefficace non plus !!! :?

une autre idée??
19/05/2008, 13h49
le_chomeur

ha pti truc !!
une cellule ne peut être vide ! met un espace insécable a l'intérieur :  

a tester ...
sinon je ne vois pas pourquoi la copie du noeud serait déformé :?
19/05/2008, 13h54
SpaceFrog

sinon il y a un truc css pour affciher les cellules vide ... mais je ne me rappelle plus ce que c'est...
19/05/2008, 14h08
cbv38

j'avais déja testé mais dans le doute j'ai recommencé et ..... cela ne fonctionne toujours pas !!!
Je continue mes recherches .. 8O
19/05/2008, 14h12
le_chomeur

la propriété css pour forcer l'affichage ou masquer tes cellules :

Code:

style="empty-cells:show"

à appliquer sur ton table /!\
19/05/2008, 15h19
cbv38

toujours pas bon !!!
je commence à avoir fait le tour et je ne vois vraiment pas comment résoudre le problème 8O8O
19/05/2008, 15h20
le_chomeur

peux tu me donner le coté html généré ?? ( pas la partie comprenant le code en java ;) )
19/05/2008, 15h23
SpaceFrog
Donc tu appendes au mauvais endroit ...

Fasi des tests pour voir ce que te retourne :
Code:

1 2 var insertHere = document.getElementById('writeroot');
et

Code:

insertHere.parentNode

à mon avis ton souci vient de là

voici le code html généré :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<div class="formulaireForm">		
		<table id="modaliteTable" style="empty-cells: show;">
			<tbody>
				<!--  ...  -->
 
			<tr>
				<td></td>
				<td class="formulaireLink">
					<a onclick="AjoutModalite()" href="#">
						Ajouter une description
					</a>
				</td>
				<td></td>
 
			</tr>
 
			<tr>
				<td class="modaliteLabel1">Intitulé</td>
				<td class="modaliteLabel2">Description</td>
				<td></td>
			</tr>
 
			<tr id="readroot" style="display: none;">
				<td class="modaliteComponent1">
 
					<input name="moIntitule_0" id="moIntitule_0" class="modaliteTextInput">
				</td>
				<td class="modaliteComponent2">
					<textarea name="moDescription_0" id="moDescription_0" rows="3" cols="60"></textarea>
				</td>
				<td>
					<a onclick="DeleteRowModalite(this)" href="#">
						<div class="UICancelButton">&nbsp;</div>
 
					</a>
				</td>
			</tr>
 
			 <!-- ligne généré au chargement de la page -->
			<tr>
				<td class="modaliteComponent1">
					<input name="moIntitule_0" id="moIntitule_0" class="modaliteTextInput">
				</td>
				<td class="modaliteComponent2">
					<textarea name="moDescription_0" id="moDescription_0" rows="3" cols="60"></textarea>
 
				</td>
				<td>
					<a onclick="DeleteRowModalite(this)" href="#">
						<div class="UICancelButton">&nbsp;</div>
					</a>
				</td>
			</tr>
 
 
			 <!-- ligne généré par la fonction javascript -->
			<tr id="" style="display: block;">
				<td class="modaliteComponent1">
 
					<input name="moIntitule_0" id="moIntitule_0" class="modaliteTextInput">
				</td>
				<td class="modaliteComponent2">
					<textarea name="moDescription_0" id="moDescription_0" rows="3" cols="60"></textarea>
				</td>
				<td>
					<a onclick="DeleteRowModalite(this)" href="#">
						<div class="UICancelButton">&nbsp;</div>
 
					</a>
				</td>
			</tr><tr id="writeroot">
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody></table>

20/05/2008, 11h11
cbv38

pas d'autre idée?
il me semble pourtant que le code html généré est correct..