Duplication ligne d'un tableau

Version imprimable

Bonjour,

J'aurais souhaité savoir comment il était possible de dupliquer une ligne de tableau (<TABLE>) à l'aide du DOM.

J'avais pensé à ça :
Code:

1 2 3 4 var tableau = document.getElementById('tableau'); var duplic = tableau.childNodes[ligne.rowIndex].cloneNode(); tableau.appendChild(duplic); tableau.moveRow(duplic.rowIndex,parseInt(ligne.rowIndex)+parseInt(1));
Mais ça ne fait rien du tout !

Merci

31/07/2006, 16h05
linar009

Je précise que ligne correspond à la ligne en cours (TR)
31/07/2006, 16h16
FremyCompany

Pour commencer, la methode cloneNode exige un argument deep (true si il faut copier aussi les sous noeads, autrement false)

Code:

cloneNode(true);
01/08/2006, 08h20
linar009

J'ai essayé de mettre true pour cloneNode, mais rien.
L'erreur qu'il me balance est la suivante :

rowIndex a la valeur null ou n'est pas un objet...
01/08/2006, 09h53
linar009

En gros, je voudrais une fonction javascript qui fasse la duplication d'une ligne d'un tableau
01/08/2006, 10h26
FremyCompany

D'ou vient ligne ?
Que contient il ?

En gros j'ai ça :

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
<TABLE>
      <tr id="1">
           <td>a</td>
           <td>b</td>
           <td>c</td>
           <td>d</td>
      </tr>
      <tr id="2">
           <td>a</td>
           <td>b</td>
           <td>c</td>
           <td>d</td>
      </tr>
      <tr id="3">
           <td>a</td>
           <td>b</td>
           <td>c</td>
           <td>d</td>
      </tr>
      <tr id="4">
           <td>a</td>
           <td>b</td>
           <td>c</td>
           <td>d</td>
      </tr>
      <tr id="5">
           <td>a</td>
           <td>b</td>
           <td>c</td>
           <td>d</td>
      </tr>
</TABLE>

Et ligne correspond à document.getElementById('3')

01/08/2006, 11h56
FremyCompany

et rowIndex ? Tu es sur que cette propriété existe ???
01/08/2006, 14h05
linar009

oui oui ça existe

http://www.quirksmode.org/dom/w3c_html.html

Et ca marche sous IE et FF en plus !
01/08/2006, 14h23
FremyCompany

et insertBefore ?
01/08/2006, 15h19
linar009

oui ça aussi impeccable sur tous les navigateurs !
02/08/2006, 10h25
linar009

J'ai essayé aussi insertBefore et rien !
02/08/2006, 11h19
linar009

J'ai l'impression que cloneNode ne fait ce que j'attends ...
non?
02/08/2006, 12h06
FremyCompany

Je propose une chose...

Et si ton tableau était créé de toute pièce depuis JavaScript ?
Tu généres bien sûr le script depuis PHP.
Ainsi, tu disposes d'un objet représantant le tableau en Javascript...
Structure proposée :

Citation:

HTMLTableCreator
-- Name : String
-- DivContent : HTMLElement
-- Rows : Array : HTMLTableCreatorRow
-- GetRowPosition : Function (Row) As Number
-- MoveRow : Sub (OldPos, NewPos, Before)
-- DeleteRow : Sub (Pos)
-- CloneRow : Function (Pos) As HTMLTableCreatorRow
-- AddRow : Sub (Row)
-- Generate : Sub ()

HTMLTableCreatorRow
-- Name : String
-- ParentTable : HTMLTableCreator
-- GetPosition : Function () As Number
-- Move : Sub (NewPos, Before)
-- Delete : Sub ()
-- Clone : Function () As HTMLTableCreatorRow
-- Cols : Array : HTMLTableCreatorCol
-- GetColPosition : Function (Number)
-- MoveCol : Sub (OldPos, NewPos, Before)
-- AddCol : Sub (Col)
-- DeleteCol : Sub (Col)
-- Generate : Sub (ParentNode)

HTMLTableCreatorCol
-- Name : String
-- ParentRow : HTMLTableCreatorRow
-- ParentTable : HTMLTableCreator
-- ...
-- GetColSpan : ...
-- GetInnerHTMl : ...
-- SetColSpan : ...
-- SetInnerHTML : ...
-- Generate : Sub (ParentNode)

Ensuite, après chaque changement, tu execute la fonction Generate de l'HTMLTableCreator qui crée une table et la place dans le DivContent...
Attention que tu DOIS mettre un TBody à ta table (TABLE(1):TBODY(1):TR(x):TD(x))
02/08/2006, 13h08
linar009

C'est super sympa ce que tu me proposes là, mais je pense qu'il doit y avoir une solution beaucoup plus simple pour résoudre mon problème.
non?

Code:

1
2
3
tableau = document.getElementById('tableauPlanif');
			duplic = ligne.cloneNode(true);		
            tableau.insertBefore(duplic);

Pourquoi ça marche pas ça ?

03/08/2006, 10h49
linar009

Il doit bien y avoir un moyen simple de dupliquer une ligne d'un tableau, non?
La solution de Fremy me ferait faire beaucoup trop de modifications. Ma vie toute entière ne suffirait pas.
03/08/2006, 11h07
FremyCompany
Citation:
Envoyé par linar009

Code:

1 2 3 tableau = document.getElementById('tableauPlanif'); duplic = ligne.cloneNode(true); tableau.insertBefore(duplic);

Pourquoi ça marche pas ça ?
insertBefore ;)

insertBefore(duplic, TrHtmlElement)
03/08/2006, 13h05
linar009

Argument non valide me dit-il fièrement lorsque je mets ta proposition Fremy ...