Style d'une cellule ajoutée dans un tableau

**nicoaix** · 25/04/2008, 13h57

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 :

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

**tusssss** · 25/04/2008, 14h06

Code :

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

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

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

Ou alors :

Code :

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

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

**nicoaix** · 25/04/2008, 14h09

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

**E.Bzz** · 25/04/2008, 14h10

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

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

A+

**tusssss** · 25/04/2008, 14h12

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

**tusssss** · 25/04/2008, 14h13

Envoyé par E.Bzz

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

A+

Bon d'accord, j'arrete d'essayer d'aider les gens

J'écrit n'importe quoi sans faire attention, j'ai vu le <td> j'ai pas fait attention au reste.

**nicoaix** · 25/04/2008, 14h16

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

**E.Bzz** · 25/04/2008, 14h23

Envoyé par nicoaix

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

Code :

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

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

ou

Code :

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

1
2
3
4
var cellule = '<td id="un_id_unique">&nbsp;</td>';
....
....
document.getElementById('un_id_unique').style.backgroundColor="#000000";

A+

**tusssss** · 25/04/2008, 14h24

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

**nicoaix** · 25/04/2008, 15h00

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 :

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

**E.Bzz** · 25/04/2008, 15h04

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+

**nicoaix** · 25/04/2008, 15h08

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

**E.Bzz** · 25/04/2008, 15h14

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+

**nicoaix** · 25/04/2008, 15h18

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

Code :

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

case (3):var cellule = '<td>s&nbsp;</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...

**E.Bzz** · 25/04/2008, 15h21

Envoyé par tusssss

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

Envoyé par nicoaix

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

Code :

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

case (3):var cellule = '<td>s&nbsp;</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...

**nicoaix** · 25/04/2008, 16h47

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

Style d'une cellule ajoutée dans un tableau

JavaScript

Discussions similaires

Partager

Partager