Clonage ligne de tableau

**cbv38** · 19/05/2008, 10h50

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 :

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
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 :

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
 
		<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

**le_chomeur** · 19/05/2008, 11h06

regarde par ici :
http://javascript.developpez.com/faq...ble#AjoutLigne

**cbv38** · 19/05/2008, 11h14

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é...

**SpaceFrog** · 19/05/2008, 11h18

Code :

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

var newField = newFields.childNodes;

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

http://www.developpez.net/forums/sho...d.php?t=475242

**le_chomeur** · 19/05/2008, 11h28

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

+1 spaffy

**cbv38** · 19/05/2008, 12h00

->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

)

->SpaceFrog : merci mais en appliquant le nodeCleaner sur mon tableau cela ne fonctionne toujours pas !!!

**SpaceFrog** · 19/05/2008, 12h05

sinon c'est pas inline-block pour un tr ?

**cbv38** · 19/05/2008, 13h29

inefficace non plus !!!

une autre idée??

**le_chomeur** · 19/05/2008, 13h49

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é

**SpaceFrog** · 19/05/2008, 13h54

sinon il y a un truc css pour affciher les cellules vide ... mais je ne me rappelle plus ce que c'est...

**cbv38** · 19/05/2008, 14h08

j'avais déja testé mais dans le doute j'ai recommencé et ..... cela ne fonctionne toujours pas !!!
Je continue mes recherches ..

**le_chomeur** · 19/05/2008, 14h12

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

Code :

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

style="empty-cells:show"

à appliquer sur ton table /!\

**cbv38** · 19/05/2008, 15h19

toujours pas bon !!!
je commence à avoir fait le tour et je ne vois vraiment pas comment résoudre le problème

**le_chomeur** · 19/05/2008, 15h20

peux tu me donner le coté html généré ?? ( pas la partie comprenant le code en java

)

**SpaceFrog** · 19/05/2008, 15h23

Donc tu appendes au mauvais endroit ...

Fasi des tests pour voir ce que te retourne :

Code :

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

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

et

Code :

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

insertHere.parentNode

à mon avis ton souci vient de là

**cbv38** · 19/05/2008, 16h24

voici le code html généré :

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
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>

**cbv38** · 20/05/2008, 11h11

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

Clonage ligne de tableau

JavaScript

Discussions similaires

Partager

Partager