comment créer des couleurs dans une même cellule

**alainbernaud** · 05/03/2011, 12h43

bonjour a tous

je voudrais savoir si quelqu'un pourrais m'aider afin de mettre différentes couleurs dans une même cellule voici mon petit langage j'ai réussi a mettre deux couleurs mais il me faudrait aussi du violet , rose,bleu ciel, noir,rouge et dans le tableau il faut que toute les cellules reste en vert fluo mais lorsque que l'on clique sur une cellule on puisse une de ces 6 couleurs merci pour votre réponse

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
<script type="text/JavaScript">
function selec(zone)
{if (zone.style.backgroundColor!="red")
  zone.style.backgroundColor="red";
else zone.style.backgroundColor="Lime"; }
</script>
<table width="500" border="4">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VL 1</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VL 2</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VL CDC</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VL OGC</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VLTT</span></span></span></font></td>
</tr>
<tr>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VSAV 1</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VSAV 2</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VSAV 3</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VSR</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">PMA</span></span></span></font></td>
</tr>
<tr>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">FPT</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">FPTL</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">EPA</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">CCF 4000</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">CDHR</span></span></span></font></td>
</tr>
<tr>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">EAU/EM</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VARGE</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">CMIC</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VPL</span></span></span></font></td>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VTU 1</span></span></span></font></td>
</tr>
<tr>
<td onclick="selec(this);" text-align:="center&quot;"><font size="4"><span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VTU 2</span></span></span></font></td>
</tr>
</tbody>
</table>

**javatwister** · 06/03/2011, 10h27

bonjour aussi

// ********** //
// mode critique //
// ********** //
quelle horreur!

==> je défie quiconque de comprendre ce que tu veux, à la lecture de ton exposé;

==> ton html semble dater d'une époque où le html n'existait pas;

==> Que faire???

// *********************

**Auteur** · 06/03/2011, 12h15

bonjour,

je crois comprendre que alainbernaud souhaite avoir des cellules dont le fond change de couleur lors d'un clic.

Il est clair que l'on utilise plus la balise <font> que l'on a remplacé par des feuilles de styles.

Il est clair aussi qu'il n'est pas nécessaire d'ouvrir autant de balises span pour définir un attribut de style :

Code html :

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

1
2
 
<span style="font-weight: bold;"><span style="font-weight: bold;"><span style="color: Black;">VLTT</span></span></span>

devient :

Code html :

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

1
2
 
<span style="font-weight: bold;color: Black;>VLTT</span>

Il y a des fautes de frappe :

Code :

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

text-align:="center""

syntaxe du Pascal pour l'affectation et des guillemets en trop

J'ai l'impression que ce code a été généré par des outils de conception de pages web quand je vois ces redondances

Voici un bout de code :

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
function selec(zone)
{
        if (zone.style.backgroundColor!="red")
                zone.style.backgroundColor="red";
        else zone.style.backgroundColor="Lime"; 
}
//-->
</script> 
</head>
 
<body>
 
	<table border="4">
	<tr>
	<td onclick="selec(this);">
	<span style="cursor:pointer; font-size:12pt; font-weight:bold; color:black; text-align:center">VL 1</span>
	</td>
	<td onclick="selec(this);">
	<span style="cursor:pointer; font-size:12pt; font-weight:bold; color:black; text-align:center">VL 1</span>
	</td>
	<td onclick="selec(this);">
	<span style="cursor:pointer; font-size:12pt; font-weight:bold; color:black; text-align:center">VL 1</span>
	</td>
	<td onclick="selec(this);">
	<span style="cursor:pointer; font-size:12pt; font-weight:bold; color:black; text-align:center">VL 1</span>
	</td>
	<td onclick="selec(this);">
	<span style="cursor:pointer; font-size:12pt; font-weight:bold; color:black; text-align:center">VL 1</span>
	</td>
	</tr>
	</table>
 
</body>
</html>

J'en ai profité pour changer l'aspect du curseur lors du survol des cellules (style cursor:pointer)

comment créer des couleurs dans une même cellule

JavaScript

Vue hybride

Discussions similaires

Partager

Partager