Style d'une cellule ajoutée dans un tableau

Version imprimable

Bonjour,
Voici le problème: au clic d'un bouton j'ajoute une ligne à un tableau de la page html, puis j'ajoute chacune des 16 cellules (puisque le tableau contient 16 colonne au départ). Ceci se fait en appelant la fonction suivante:

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
 
function ajout_ligne(){
var newRow = document.getElementById('table').insertRow(-1);
		var j = 0;
		for(j=0;j<16;j++){
			var newCell = newRow.insertCell(j);
			switch(j){
				case (0):var cellule = '<td>&nbsp;</td>';
				break;
				case (1):var cellule = '<td>&nbsp;</td>';
				break;
				case (2):var cellule = '<td>&nbsp;</td>';
				break;
				case (3):var cellule = '<td bgcolor="#000000">&nbsp;</td>';
				break;
				case (4):var cellule = '<td>e&nbsp;</td>';
				break;
				case (5):var cellule = '<td>f&nbsp;</td>';
				break;
				case (6):var cellule = '<td>g&nbsp;</td>';
				break;
				case (7):var cellule = '<td>h&nbsp;</td>';
				break;
				case (8):var cellule = '<td>i&nbsp;</td>';
				break;
				case (9):var cellule = '<td>j&nbsp;</td>';
				break;
				case (10):var cellule = '<td>k&nbsp;</td>';
				break;
				case (11):var cellule = '<td>l&nbsp;</td>';
				break;
				case (12):var cellule = '<td>m&nbsp;</td>';
				break;
				case (13):var cellule = '<td>n&nbsp;</td>';
				break;
				case (14):var cellule = '<td>o&nbsp;</td>';
				break;
				case (15):var cellule = '<td>p&nbsp;</td>';
				break;
			}
			newCell.innerHTML = cellule;
 
		}
}

Comme vous pouvez le voir dans le case (3) j'ajoute une cellule dont le fond doit être coloré en noir. Ceci fonctionne sous firefox mais pas sous IE. Or c'est plutot le contraire qui m'arrangerait à défaut que cela fonctionne sur les 2 navigateurs.
Comment faire à votre avis pour que ça fonctionne sous IE? Il y a-t-il une erreur quelque part?

Merci

Code:

1
2
case (3):var cellule = '<td>&nbsp;</td>';cellule.style.background="#000000";
				break;

Cela devrait fonctionner, en tout cas ça fonctionne chez moi :D

Ou alors :

Code:

1
2
case (3):var cellule = '<td id="MonId">&nbsp;</td>';document.getElementById('MonId').style.background="#000000";
				break;

25/04/2008, 14h09
nicoaix

Tu utilises quelle version d'IE? 6? parce que chez moi sur IE 7 ça ne marche pas...A moins qu'il y ait d'autre bout de code chez moi qui perturbe cette fonction...
25/04/2008, 14h10
E.Bzz

Citation:

Envoyé par nicoaix

Tu utilises quelle version d'IE? 6? parce que chez moi sur IE 7 ça ne marche pas...A moins qu'il y ait d'autre bout de code chez moi qui perturbe cette fonction...

:koi:
C'est surtout qu'appliquer un style à une variable de type string ... :aie:

A+
25/04/2008, 14h12
tusssss

J'avoue que j'ai toujours écrit ca comme cela dans mes programmes, mais je ne sais pas si ça ne marche pas que seulement grâce à une manière spéciale de déclarer mes variables...
25/04/2008, 14h13
tusssss

Citation:

Envoyé par E.Bzz

:koi:
C'est surtout qu'appliquer un style à une variable de type string ... :aie:

A+

Bon d'accord, j'arrete d'essayer d'aider les gens :lol: J'écrit n'importe quoi sans faire attention, j'ai vu le <td> j'ai pas fait attention au reste.
25/04/2008, 14h16
nicoaix

Ok, mais alors comment faire pour ajouter une cellule avec un fond noir?
25/04/2008, 14h23
E.Bzz
Citation:

Envoyé par nicoaix

Ok, mais alors comment faire pour ajouter une cellule avec un fond noir?

Code:

var cellule = '<td style="background-color:#000000;"> </td>';

ou
Code:

1 2 3 4 var cellule = '<td id="un_id_unique"> </td>'; .... .... document.getElementById('un_id_unique').style.backgroundColor="#000000";
A+
25/04/2008, 14h24
tusssss

En fait, tu peux pas appliquer le style sur ta variable newCell?

Ca fonctionne bien sous mozilla mais sous IE 7 ça ne fait rien (ça ne colore pas la cellule voulu en noir). Voici le code complet de la page que je teste:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript" type="text/javascript">
function ajout(){
var newRow = document.getElementById('table').insertRow(-1);
		var j = 0;
		for(j=0;j<16;j++){
			var newCell = newRow.insertCell(j);
			switch(j){
				case (0):var cellule = '<td>&nbsp;</td>';
				break;
				case (1):var cellule = '<td>&nbsp;</td>';
				break;
				case (2):var cellule = '<td>&nbsp;</td>';
				break;
				case (3):var cellule = '<td style="background-color:#000000;">s&nbsp;</td>'; 
				break;
				case (4):var cellule = '<td>e&nbsp;</td>';
				break;
				case (5):var cellule = '<td>f&nbsp;</td>';
				break;
				case (6):var cellule = '<td>g&nbsp;</td>';
				break;
				case (7):var cellule = '<td>h&nbsp;</td>';
				break;
				case (8):var cellule = '<td>i&nbsp;</td>';
				break;
				case (9):var cellule = '<td>j&nbsp;</td>';
				break;
				case (10):var cellule = '<td>k&nbsp;</td>';
				break;
				case (11):var cellule = '<td>l&nbsp;</td>';
				break;
				case (12):var cellule = '<td>m&nbsp;</td>';
				break;
				case (13):var cellule = '<td>n&nbsp;</td>';
				break;
				case (14):var cellule = '<td>o&nbsp;</td>';
				break;
				case (15):var cellule = '<td>p&nbsp;</td>';
				break;
			}
			newCell.innerHTML = cellule;
		}
}
 
 
</script>
</head>
 
<body>
<table width="100%" border="0" id="table">
  <tr>
    <td><label>
      <input type="submit" name="Submit" value="Envoyer"  onclick="ajout();"/>
    </label></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

25/04/2008, 15h04
E.Bzz

Tu as essayé la 2° solution (avec document.getElementById() ) ?
Elle est plus "propre" (mais tu devras gérer un compteur des cellules ajoutées pour que l'ID reste unique) ...

A+
25/04/2008, 15h08
nicoaix

Désolé mais aucune des 2 ne fonctionne sous IE (6 et 7)...mais pas de problème sous firefox (testé avec la 1ere solution).
25/04/2008, 15h14
E.Bzz

Citation:

Envoyé par nicoaix

Désolé mais aucune des 2 ne fonctionne sous IE (6 et 7)...mais pas de problème sous firefox (testé avec la 1ere solution).

Ah si : la 2° solution (sous réserve de l'intégrer correctement) fonctionnera sur tous les nav ...

A+
25/04/2008, 15h18
nicoaix

J'ai trouvé...En fait j'ai modifié la ligne du case(3) par:

Code:

case (3):var cellule = '<td>s </td>'; newCell.style.backgroundColor = '#000000';

En fait il fallait appliquer le style à l'objet 'newCell' et non à la variable 'cellule' qui est son contenu (même si son contenu contient des balises...
25/04/2008, 15h21
E.Bzz

Citation:

Envoyé par tusssss

En fait, tu peux pas appliquer le style sur ta variable newCell?

Citation:

Envoyé par nicoaix

J'ai trouvé...En fait j'ai modifié la ligne du case(3) par:

Code:

case (3):var cellule = '<td>s </td>'; newCell.style.backgroundColor = '#000000';

En fait il fallait appliquer le style à l'objet 'newCell' et non à la variable 'cellule' qui est son contenu (même si son contenu contient des balises...

8O :roll:
25/04/2008, 16h47
nicoaix

Désolé j'avais pas vu...mea culpa :(