Manipulation de plusieurs tables clones

Version imprimable

01/04/2015, 23h02
jack_mayole

2 pièce(s) jointe(s)

Manipulation de plusieurs tables clones

Bonjour a tous,

Je suis tout nouveau a ce forum et tout nouveau au monde de la programmation. récemment je me suis lancer dans le Jquery.

Alors je me lance dans la question folle ;)

Je ai une table simple appelé " datatable " avec des TR et des TD . Ce tableau est placé dans un div appelé " Input1 en utilisant la méthode clone ( ) , je clone cette table en l'attribuent une nouvelle id a elle et tous les éléments . Par exemple TD01 une fois cloné devient td01_2 et ainsi de suite .

Sous le div " Input1 " , donc la premiere table, j'ai une table caché appelé " sticker_table " qui est également cloné chaque fois et celle ci devrait être rempli avec certains attributs de la table principale . Ce tableau est également dans un div nommé "sticker1" .

Le but de tout ceci étant de pouvoir cloner autant de tables que nécessaire , chacune contenant des informations différentes , et ensuite avoir un bouton pour basculer d'une vue complexe a une vue simplifiée pour avoir une mise en page propre pour l'impression des tables .

Les tableaux originaux ressemble à ceci
Pièce jointe 173542

Le but est de pouvoir basculer les tableau dans une vue plus simple telle que ce tableau.

Pièce jointe 173543

donc pour réussir il me semble qu'il faut manipuler les éléments dans la table et les cloner a chaque fois dans la nouvelle table cacher a ces cotés qui est cloner.

J’espère que pour une première, ma question reste compréhensible :lol:

voici un lien du code simplifié que j'ai fait.

http://jsfiddle.net/adrienboufflet/a6m9uh0c/4/
02/04/2015, 19h49
NoSmoking
Bonjour,

Citation:

(...)et ensuite avoir un bouton pour basculer d'une vue complexe a une vue simplifiée pour avoir une mise en page propre pour l'impression des tables .

pourquoi ne pas faire cela en CSS avec un
Code:

1 2 3 4 5 <style media="print" type="text/css">  </style>
02/04/2015, 21h09
headmax

Un exemple basé sur json

Salut,
Petit exemple, les tableaux mon prit le plus de temps mais, ça l'air de marcher petit hic je suis passé sur du JS oldschool donc a améliorer et adapter en jquery...

http://jsfiddle.net/t3kydm5x/
02/04/2015, 21h49
jack_mayole

Wow!!!! merci pour tout le travail. Le code marche a merveille. malheureusement le but est de pouvoir partir d'une base d'un tableau html, qui est cloner a multiple reprises puis ensuite pouvoir basculer sur une vue simplifiée qui filtre que certains champs.
J'apprécie vraiment tout le travail que vous avez passer pour m'aider a trouver une solution mais dans votre fiddle, les 2 tables sont vraiment 2 tables différentes. Si je modifie une des tables, l’autre ne prend pas les mêmes valeurs.

J'ai beaucoup réfléchi a ce que je voudrais réussir a faire, et je me demande si modifier la structure de la, ou les tables actuelles, ne serait pas plus simple. Modifier le DOM en cachent avec .hide(). Puis ensuite déplacer les éléments avec .append().

Maintenant faut que je comprennent comment réussir une boucle avec la fonction .each().

j'ai décider de me lancer dans le jquery, donc pour tout vous avouer, votre code et un peut compliquer a comprendre pour le moment. Je vais me pencher dessus pour essayer de comprendre tout ce qu'il se passe et je pense que un programmeur qui maitrise le javascript pur, peut se sentir beaucoup plus alaise avec du jquery.

encore merci
03/04/2015, 12h14
headmax

Salut, ;) effectivement pour les inputs j'avais pas compris par contre le clonage pour ce type de situation n'est pas nécessaire, il faut passer par les cookies ou les session côté client comme localstorage ou sessionstorage donc dans mon exemple je t'ai fait un mixte Oldschool Jquery un peu cracra je l'avoue :( mais c'est du vite fait, que tu corrigera sans doute et améliora a ta convenance.

http://liveweave.com/s46MnU

Je t'ai mit un exemple dans ton cas de figure une boucle each

bonne chance pour la suite.
03/04/2015, 13h47
jack_mayole

Merci pour la réactivité. je suis sur le cul de voir tout ça fonctionner. Bon c'est parti pour des heurs a décortiquer tout ca ;-). la pour le coup la difficulté va etre de comprendre comment réussir a intégrer tout ça maintenant. Jetais parti sur une base HTML pour creer la table de base puis utiliser JS pour cloner. La pour le coup c'est JS qui fait tout !!! Ca va m’occuper un bon moment je pense pour mélanger le tout.

Encore merci
03/04/2015, 14h50
headmax

Oui comme disait @no smoking tu pouvait passer par du css en affichant cachant, ici j'ai essayé de respecté une certaine logique de développement passé par des tableau json pour mieux maintenir et faire évoluer le petit plugin que tu peux tout a fait réalisé avec les $fn en jquery ;).
Le but pour moi ici était dans ce sens, après tu n'est pas obligé de l'utiliser si tu n'en comprend pas le sens n'hésite pas a poser des questions je répondrais quand j'aurais un moment, je pense que pour le thème du thread ton exercice semble résolu sans passer par du clone.

La transposition d'une TABLE ne nécessite pas de clonage mais un déplacement des cellules au bon endroit.

- Il faut d'abord ajouter des lignes, TR, à la TABLE si besoin afin d'avoir la place de tout replacer
- Il faut ensuite déplacer les cellules et pour ce faire on utilise la méthode appendChild qui prend et déplace un élément si déjà existant
- Au final il faut nettoyer les TR vide, qui n'ont plus d'enfant.

Voila pour le principe sommaire, pour la fonction elle pourrait s'écrire comme suit

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
function transposeTable( ref){
  // récup. objet ou id élément
  var oTable = typeof( ref) === 'object' ? ref : document.getElementById( ref),
      oTbody = oTable.tBodies[0],
      nbLig = oTbody.rows.length,
      nbCol = oTbody.rows[0].cells.length,
      i, lig, col;
 
  // création des TR
  for( i=0; i <nbCol-nbLig; i++){
    oTbody.appendChild( document.createElement('TR'));     
  }
  // déplacement des TD via un appendChild
  // on commence par la dernière colonne
  col = nbCol;
  while( col){
    col--;      
    for( lig=0; lig <nbLig; lig++){
      oTbody.rows[col].appendChild( oTbody.rows[lig].cells[col]);     
    }
  }
  // nettoyage des TR vide en partant de la fin de la table
  lig = oTbody.rows.length -1;  
  while( !oTbody.rows[lig].cells.length){
    oTbody.removeChild( oTbody.rows[lig]);   
    lig--;
  }
}

Maintenant pour la réalisation d'une transposition d'un clone de la TABLE on peut écrire la fonction suivante en se resservant de la fonction ci dessus

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function transposeCloneTable( id_table){
  var oClone,
      oTable = document.getElementById( id_table),
      id_clone = oTable.id +'_clone';
  // destruction si existant
  oClone = document.getElementById( id_clone);
  if( oClone){
    oClone.parentNode.removeChild( oClone);
  }
  //création du clone
  oClone = oTable.cloneNode( true);
  // affectation de l'ID
  oClone.id = id_clone;
  // transpose le clone
  transposeTable( oClone);  
  // ajout
  oTable.parentNode.appendChild( oClone);      
}

en bonus un fichier de test sur base de ton code de départ

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Transposition de TABLE</title>
<meta name="Author" content="NoSmoking">
<style>
body {
    margin:1em;
    padding:0;
    font:100%/150% Verdana,sans-serif;
}
table {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid;
    font-size: 15px;
}
td {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid;
    padding: 12px;
}
</style>
<script>
function transposeTable( ref){
  // récup. objet ou id élément
  var oTable = typeof( ref) === 'object' ? ref : document.getElementById( ref),
      oTbody = oTable.tBodies[0],
      nbLig = oTbody.rows.length,
      nbCol = oTbody.rows[0].cells.length,
      i, lig, col;
 
  // création des TR
  for( i=0; i <nbCol-nbLig; i++){
    oTbody.appendChild( document.createElement('TR'));     
  }
  // déplacement des TD via un appendChild
  // on commence par la dernière colonne
  col = nbCol;
  while( col){
    col--;      
    for( lig=0; lig <nbLig; lig++){
      oTbody.rows[col].appendChild( oTbody.rows[lig].cells[col]);     
    }
  }
  // nettoyage des TR vide en partant de la fin de la table
  lig = oTbody.rows.length -1;  
  while( !oTbody.rows[lig].cells.length){
    oTbody.removeChild( oTbody.rows[lig]);   
    lig--;
  }
}
function transposeCloneTable( id_table){
  var oClone,
      oTable = document.getElementById( id_table),
      id_clone = oTable.id +'_clone';
  // destruction si existant
  oClone = document.getElementById( id_clone);
  if( oClone){
    oClone.parentNode.removeChild( oClone);
  }
  //création du clone
  oClone = oTable.cloneNode( true);
  // affectation de l'ID
  oClone.id = id_clone;
  // transpose le clone
  transposeTable( oClone);  
  // ajout
  oTable.parentNode.appendChild( oClone);      
}
</script>
</head>
<body>
<h1>Transpose Table</h1>
<p>
  <button onclick="transposeTable('datatable');">Transpose Table</button>
  <button onclick="transposeCloneTable('datatable');">Transpose Clone Table</button>
</p>
<table border id="datatable" class="datatable_class">
  <tbody>    
    <tr>
        <td>td 01</td>
        <td bgcolor="red"><input id="text1_2" value="td 02"></td>
    </tr>
    <tr>
        <td>td 03</td>
        <td bgcolor="green"><input id="text2_2" value="td 04"></td>
    </tr>
    <tr>
        <td>td 05</td>
        <td bgcolor="blue"><input id="text3_2" value="td 06"></td>
    </tr>
    <tr>
        <td>td 07</td>
        <td bgcolor="orange"><input id="text4_2" value="td 08"></td>
    </tr>
    <tr>
        <td>td 09</td>
        <td bgcolor="yellow"><input id="text5_2" value="td 10"></td>
    </tr>
    <tr>
        <td bgcolor="grey">text 1</td>
        <td bgcolor="grey">text 2</td>
    </tr>
  </tbody>
</table>
<p></p>
</body>
</html>

Le seul bémol est que dans ces cas il faut bien calculer la façon d'attribuer le CSS, l'ID des deux TABLEs étant différente, il vaut donc mieux passer par des classes que par des ID.

Les fonctions peuvent être améliorées pour être un peu plus "universelles".

PS : mille excuses c'est en "Oldschool" ;)