Discussion :

[jihel]

Bonjour à tous

Découvrant JS et le DOM, je me hasarde à poster un message sur ce haut lieu de la connaissance du développement, que j'ai grandement eu l'occasion d'apprécier et parcourir dans les mois et années passées à la conception de logiciels.
Je me mets aujourd'hui au web (comme tout un chacun), au php, frameworks et autres outils, et me pose une question concernant l'imbrication dynamique d'une table html dans une cellule d'une ligne sélectionnée.
Du genre :
Ma table existante (je passe sur les cellules TD):
TABLE id=grid
THEAD
TBODY id=gbody
TR id=tr0
TR id=tr1
TR id=tr2
TR id=tr3
TFOOT

1ère étape : en cliquant sur le TR id=tr1, j'ai obtenu l'insertion d'une ligne d'id=S_TR1 sous la ligne sélectionnée, avec 2 TD, avec la méthode InsertRow.
2ème étape : je voudrais maintenant intégrer un ensemble TABLE/THEAD/TBODY/TR/TFOOT dans la seconde TD de cette nouvelle ligne pour en faire une sous-table, mais je n'y parviens pas. Pas encore assez féru dans ce monde sûrement.
Voici le code utilisé :

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
function addTable(row){
  orig=document.getElementById(row);
  empty=document.getElementById('empty');
  var iL = parseInt(row.rowIndex) + 1;
  var tr = document.getElementById('grid').insertRow(iL);
  tr.setAttribute('id','s_'+row.id);
  var td = tr.insertCell(0);
  td.setAttribute("colspan",2);
  td.setAttribute("style", "border-bottom:0px;border-top:0px;");
  var td = tr.insertCell(1);
  td.setAttribute("colspan",7);
    newtable=document.createElement("TABLE");
    newtbody=document.createElement("TBODY");
    newtr=document.createElement("TR")
    newtd=document.createElement("TD");
    newtxt=document.createTextNode("Détail du LOT DE PLAQUES");
    newtd.appendChild(newtxt);
    newtr.appendChild(newtd);
    newtbody.appendCHild(newtr);
    newtable.appendChild(newtbody);
    newtable.setAttribute('id','subgrid');
    td.appendChild(newtable);
  return;
}

Ma question donc : est-ce réalisable ? si oui, quelqu'un pourrait-il me guider vers la méthode à utiliser ? où encore me conseiller un ouvrage traitant de ce sujet ?
Je conviens que ce genre de question n'a sûrement que peu ou pas d'intérêt pour les aficionados du JS et qu'il existe probablement des bibliothèques qui réalisent ce genre de travail, mais je souhaite avant tout apprendre et comprendre comment cela fonctionne et je ne trouve pas d'éléments sur le net qui m'aiguille sur cette voie (ou alors j'ai loupé un passage).
Alors d'avance je vous adresse un grand merci pour l'aide, pour toutes les suggestions et conseils que vous voudrez bien m'apporter sur ce sujet.
Cordialement
JiheL

[le_chomeur]

Salut a toi jihel

je n'ai pas vu de problème particulier sur ton code , la création/insertion du table est correcte , aurais tu l'exemple complet ?

[jihel]

Merci le_chomeur, pour ta célérité, c'est fort sympa (entre nous j'espère que ton pseudo n'est pas en rapport avec ta situation...)

Ne sachant précisément ce que tu souhaites voir, je te mets un screenshot et le code html correspondant à la table.

et je voudrais obtenir ceci (c'est un montage)

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
<table class="entete" cellspacing="0" cellpadding="0" id="grid">
	<thead>
    <tr>
	    <td colspan="10" align="left"><span>&nbsp;Liste des LOTS DE PLAQUES</span>&nbsp;Liste des LOTS DE PLAQUES</td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td><span>Client</span>Client<img src={$j_basepath}jelix/design/images/ui_up.png></td>
      <td><span>Nom</span>Nom<img src={$j_basepath}jelix/design/images/ui_sort.png></td>
      <td><span>Site</span>Site<img src={$j_basepath}jelix/design/images/ui_sort.png></td>
      <td><span>Marque</span>Marque<img src={$j_basepath}jelix/design/images/ui_sort.png></td>
      <td><span>Plaque</span>Plaque<img src={$j_basepath}jelix/design/images/ui_sort.png></td>
      <td><span>Matériau</span>Matériau<img src={$j_basepath}jelix/design/images/ui_sort.png></td>
      <td><span>Qté</span>Qté</td>
      <td width="5">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" width="48" title=" Filtre Auto "><img src="{$j_basepath}jelix/design/images/ui_search.png"></td>
      <td align="left"><input type="text" id="f_clt" style="width:80px;"></td>
      <td align="left"><input type="text" style="width:80px;"></td>
      <td align="left"><input type="text" style="width:80px;"></td>
      <td align="left"><input type="text" style="width:80px;"></td>
      <td align="left"><input type="text" style="width:80px;"></td>
      <td align="left"><input type="text" style="width:80px;"></td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody id="gbody"><tr></tr></tbody>
  <tfoot>
  </tfoot>

La ligne blanche dans l'image, c'est la ligne insérée id=s_tr1 avec les 2 td.
Ne penses-tu pas que la dernière instruction JS du premier post, td.appendChild(newtable), soit erronée parce que pas de textNode ? (sais pas si obligatoire)
Voici le code JS de remplissage initial des datas :

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
function tbl(donnees){
  var tableau=donnees.split("|");
  var result="";
  for(var i=0;i < tableau.length-1;i++){
	  var tab=tableau[i].split(";");
    if(i % 2>0){var class=" odd";}else{class=" even";}
	  result+="<tr id=\"tr"+i+"\" onclick=\"addTable(this)\">";
    result+="<td width=\"16\" class=\"row\">"+(eval(tab[0])+1)+"</td>";
	  result+="<td width=\"18\" class=\""+class+"\"><img src=\""+path+"expand.gif\"></td>";  
	  result+="<td align=\"left\" class=\""+class+"\"><b>"+tab[5]+"</b></td>";
	  result+="<td align=\"left\" class=\""+class+"\">"+tab[6]+"</td>";
	  result+="<td align=\"left\" class=\""+class+"\">"+tab[7]+"</td>";
	  result+="<td align=\"left\" class=\""+class+"\">"+tab[8]+"</td>";
	  result+="<td align=\"left\" class=\""+class+"\">"+tab[9]+"</td>";
	  result+="<td align=\"left\" class=\""+class+"\">"+tab[11]+"</td>";
	  result+="<td class=\""+class+"\"></td>";
	  result+="</tr>";
  }
  if(i<20){
    var h=(20-i)*20;
    result+="<tr style=\"height:"+h+"px;\" id=\"empty\"><td colspan=\"9\" style=\"border-right:0 solid black;\"></td></tr>";
  }  
  return result;
}

J'espère que cela convient à ce que tu attends. Merci encore et d'avance pour ton aide sympathique. J'espère pouvoir comprendre ce qui se passe.
Bonne journée
Cordialement
Jihel