Discussion :

[linar009]

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 :

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

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

[linar009]

Je précise que ligne correspond à la ligne en cours (TR)

[FremyCompany]

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

Code :

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

cloneNode(true);

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

[linar009]

En gros, je voudrais une fonction javascript qui fasse la duplication d'une ligne d'un tableau

[FremyCompany]

D'ou vient ligne ?
Que contient il ?

[linar009]

En gros j'ai ça :

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

[FremyCompany]

et rowIndex ? Tu es sur que cette propriété existe ???

[linar009]

oui oui ça existe

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

Et ca marche sous IE et FF en plus !

[FremyCompany]

et insertBefore ?

[linar009]

oui ça aussi impeccable sur tous les navigateurs !

[linar009]

J'ai essayé aussi insertBefore et rien !

[linar009]

J'ai l'impression que cloneNode ne fait ce que j'attends ...
non?

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

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

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

[linar009]

Code :

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

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

Pourquoi ça marche pas ça ?

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

[FremyCompany]

Code :

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

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

Pourquoi ça marche pas ça ?

insertBefore

insertBefore(duplic, TrHtmlElement)

[linar009]

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