Fond jaune clair et contour rouge de la cellule qui a le focus

**beegees** · 23/08/2008, 12h34

Bonjour tout le monde,

J'ai un tableau qui contient 5 colonnes.

La 5e colonne contient des input.

J'aimerais simplement que la cellule active (celle qui a le focus) ait un fond jaune clair et un contour rouge.

Mieux encore, la ligne complète ne peut pas être de bordure rouge et l'input de la ligne en fond jaune claire ?

J'ai cherché sur les sujets déjà placés et j'ai trouvé ceci :

http://www.developpez.net/forums/m544417-6/

Mais après avoir fais un copier/coller du code dans Dreamweaver 8, le résultat me donne un tableau avec des inputs sans couleur.

Voici mon code au cas où :

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
<!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>
</head>
 
<body>
<table border="1" width="100%">
	<tr >
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="20%"><input type="text" name="textfield" /></td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="30%"><input type="text" name="textfield2" /></td>
		<td  onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%"><input type="text" name="textfield3" /></td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%"><input type="text" name="textfield4" /></td>
	</tr>
	<tr>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="20%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="30%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%">&nbsp;</td>
	</tr></table>
</body>
</html>

Merci d'avance pour votre aide.

beegees

**Auteur** · 23/08/2008, 13h05

bonjour,

Firefox ne gère pas le onfocus et onblur sur les td (contrairement à IE).

**beegees** · 23/08/2008, 13h08

Envoyé par Auteur

bonjour,

Firefox ne gère pas le onfocus et onblur sur les td (contrairement à IE).

Bonjour,

Merci pour ta réponse.

Etrange, j'ai trouvé ce code :

Code :

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

1
2
3
		<td  width="20%"><input type="text" size="40" maxlength="50" name="pharma_name"
 onFocus='javascript:this.style.backgroundColor="yellow"'
 onBlur='javascript:this.style.backgroundColor="white"'></td>

Et vous pouvez voir le résultat ici

J'aimerais juste que cela s'applique à TR, est-ce possible ?

Merci encore.

beegees

**Auteur** · 23/08/2008, 13h59

tu peux utiliser onmouseover et onmouseout :

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
 
<table border="1" width="100%">
	<tr >
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="20%"><input type="text" name="textfield" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="30%"><input type="text" name="textfield2" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="25%"><input type="text" name="textfield3" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="25%"><input type="text" name="textfield4" /></td>
	</tr>
	<tr onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">
		<td width="20%"><input type="text" name="textfield" /></td>
		<td width="30%"><input type="text" name="textfield2" /></td>
		<td width="25%"><input type="text" name="textfield3" /></td>
		<td width="25%"><input type="text" name="textfield4" /></td>
	</tr>
</table>

1ère ligne du tableau : j'applique les événement sur les td
2ème ligne du tableau : les événements sont appliqués sur le tr

**beegees** · 23/08/2008, 16h04

Envoyé par Auteur

tu peux utiliser onmouseover et onmouseout :
1ère ligne du tableau : j'applique les événement sur les td
2ème ligne du tableau : les événements sont appliqués sur le tr

Merci pour ta réponse et pour le temps que tu y as consacré.

Le résultat est celui attendu, seul l'évènement déclencheur n'est pas celui que je veux utiliser.

Je pense que ce n'est pas possible de sélectionner une ligne d'un tableau si on clique dans une de ses cellules.

Merci quand même.

beegees

Invité · 23/08/2008, 16h36

Bonjour,

Code :

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

1
2
3
4
 
<tr onclick="...">
   ....
</tr>

Si tu cliques sur une cellule contenu dans le <tr>, l'évènement est pris en compte aussi sur le <tr>
A+

Fond jaune clair et contour rouge de la cellule qui a le focus

JavaScript

Vue hybride

Discussions similaires

Partager

Partager