Discussion :

[LE NEINDRE]

Bonjour à tous,

J'ai un problème avec ce script:

Dans mon code javascript:

Code :

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

1
2
3
4
5
6
7
8
9
 
my_row=document.createElement("TR");
for(var i=0;i<xmlres.length;i++)
{
     var my_cell=document.createElement("TD");
     my_cell.style.background="rgb(255,0,0)";
     my_row.appendChild(my_cell);
}
document.getElementById('PROGRESS').appendChild(my_row);

dans ma page html

Code :

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

1
2
 
<TABLE width='80%' align='center' border=1 id='PROGRESS'></TABLE>

Pourquoi ça ne fonctionne pas ????

Merci de votre aide !!!

[SpaceFrog]

parceque appendChild ne fonctionne que dans un tbody ...

ajoute un tbody à ton tableau ...

[LE NEINDRE]

ok, je vais tenter cela.
Mais qu'est-ce qu'un tbody ???

[SpaceFrog]

c'est ce qui va sous un theader ...


d'ailleur IE et Ffx le simulent si tu ne l'as pas mis ...
pour t'en convaincre essaye de récupérer le firstChild.NodeName il te retournera TBODY ...

sinon la struicture devrait ressembler à ça ...

Code :

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

1
2
3
4
5
6
7
8
9
<table>
<theader>
</theader>
<tbody>
<tr>
<td>..</td>
</tr>
</tbody>
<table>

[LE NEINDRE]

Génial !!!
ça marche !!

Meric beaucoup pour ton aide. J'ai fait:

pour le javascript

Code :

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

1
2
3
4
5
6
7
8
9
 
my_row=document.createElement("TR");
for(var i=0;i<xmlres.length;i++)
{
     var my_cell=document.createElement("TD"); 
     my_cell.style.background="rgb(255,0,0)";
     my_row.appendChild(my_cell);
}
document.getElementById('PROGRESS').appendChild(my_row);

Dans le code HTML:

Code :

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

1
2
 
print "<TABLE class=\'div_style2\'><TBODY id='PROGRESS'></TBODY></TABLE>\n";

Il me reste encore une dernière question à poser, si ça ne te dérange pas !!
Lorsque je créé un TD avec

Code :

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

1
2
 
var my_cell=document.createElement("TD");

Est il possible de lui attribuer un ID et un STYLE ???
Si oui, par quel diabolique stratagème !!

[SpaceFrog]

pour l'id rien de plus simple:

Code :

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

1
2
3
 
var my_cell=document.createElement("TD"); 
my_cell.id="montd" //éventuellement +indice il ne doit y avoir qu'un seul id

pour ce qui est du style ...
plusieurs possibilités:
soit directement dasn la balise td:

Code :

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

var my_cell.style.cssText="background-color:red;color:blue"

ou alors en ayant des class

Code :

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

var my_cell.className="NomdeClass"

entre autres possibilités ...

[LE NEINDRE]

C'est parfait.

Tout marche nickel !!!
Merci encore pour ton aide !

[LE NEINDRE]

Salut SpaceFrog,
je reviens vers toi car j'ai voulu formater un peu mon truc en faisant uyne fonction qui créé la progress bar, comme ceci:

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
 
function CreateProgressBar(total)
{
      var my_table=document.createElement("TABLE");
      var my_row=document.createElement("TR");
 
      for(var i=0;i<total;i++)
      {
            var my_cell=document.createElement("TD");
            my_cell.id="TD"+i;
            my_cell.style.background="#9933cc";
            my_row.appendChild(my_cell);
      }
 
      my_table.style.className='Div_style2';      
      my_table.appendChild(my_row);
      document.getElementById('PROGRESSBAR').appendChild(my_table);
}

L'id 'PROGRESSABR' fait référence à un TBODY qui est dans une cellule d'un autre tableau.

Et , diantre, ça ne fonctionne plus.

Saurais tu pourquoi ???

[SpaceFrog]

Code :

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

my_cell.style.backgroundColor ="#9933cc";

ensuite tu ne tu ne fais pa de

Code :

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

createElement('tbody')

...

[LE NEINDRE]

Dans mon code HTML j'ai:

Code :

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

1
2
3
 
<TR><TD colspan='2' width='100%' id='PROGRESSBAR'>
</TD></TR>

Dans le 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
17
18
19
20
 
function CreateProgressBar(total)
{
      var my_tbody=document.createElement("TBODY");
      var my_table=document.createElement("TABLE");
      var my_row=document.createElement("TR");
 
      for(var i=0;i<total;i++)
      {
            var my_cell=document.createElement("TD");
            my_cell.id="TD"+i;
            my_cell.style.backgroundColor="rgb(255,0,0)";
            my_row.appendChild(my_cell);
      }
 
      my_table.style.className='Div_style2';      
      my_table.appendChild(my_row);
      my_tbody.appendChild(my_table);
      document.getElementById('PROGRESSBAR').appendChild(my_tbody);
}

Et toujours rien ??

[SpaceFrog]

heu je n'ai pas l'impression que tu appendes comme il faut ...


append le td dans le tr
append le tr dans le tbody
append le tbody dans le table ...

[LE NEINDRE]

Mais quel idiot, mais quel idiot !!!!

ça fonctionne maintenant.

Merci beaucoup !

[denisC]

Pour info sur les tbody:

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1

TR n'est pas un des enfants possibles d'une table d'après la norme HTML 4.01