Couleur d'arrière plan d'une table

**L'AMI Yves** · 16/01/2020, 19h36

Bonsoir la compagnie !

Je reviens avec un nouveau problème que je ne m'explique pas : J'ai un grand tableau que s'appelle "latable", dans lequel je peux sélectionner une ligne. Le code HTML est donc très simple : par exemple

Code HTML :

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

1
2
 
<tr id='L811' class='a_val' onclick="Sel(L811)">

Le problème n'est pas dans le traitement lui-même de la ligne 811, mais dans le fait que je veux mettre l'arrière-plan de cette ligne en bleu, et effacer tous les autres arrière-plans de la table. J'écris donc (dans la fonction Sel(lien)) :

Code javascript :

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

1
2
3
 
  document.getElementById('latable').style.backgroundColor='white';
  lien.bgColor='#00FFFF';

Eh bien la première ligne ne fait (apparemment) rien, alors que la seconde fonctionne très bien. En pratique, cela se traduit par le fait que, tant que la page n'est pas rechargée, toutes les lignes qui ont été sélectionnées restent bleues.

J'ai interrogé mon ami Google, qui m'a dit (si j'ai bien interprété) que je pouvais remplacer "style.backgroundColor" par "bgColor" ou même "color", mais c'est tout ce que j'ai trouvé.

Je suppose que (comme d'habitude) la solution est très simple, mais là, je ne vois pas !

Merci d'avance pour votre aide.

AMIcalement.

**javatwister** · 17/01/2020, 08h03

Bonjour

non non, style.backgroundColor fonctionne partout et tu peux sans problème demander un fond blanc à la table et un fond bleu à la ligne sélectionnée;

Vois si tu n'as pas des classes concurrentes sur td, tr, table.

**L'AMI Yves** · 17/01/2020, 08h17

J'ai compris ! Décidément, la nuit porte conseil : j'étais passé sur la réponse hier au cours de mes recherches !

Lorsque l'on fixe la couleur d'arrière-plan pour un élément HTML, on a l'impression que ses enfants en héritent, mais en fait, ça n'est pas vrai : ses enfants ont tout simplement la couleur d'arrière-plan "transparent".

Donc, pour résoudre mon problème, il ne faut pas que je donne la couleur d'arrière plan "blanc" à l'élément "<table>", mais que je rende la couleur "transparent" à l'élément "<tr>" concerné.

Et ça marche.

J'espère que ça pourra servir à d'autres.

AMIcalement.

**javatwister** · 17/01/2020, 12h22

et quand tu cliques sur un autre tr??? comment le précédent redevient-il transparent?

**javatwister** · 17/01/2020, 12h51

Pour l'instant je n'ai pas de solution miracle (appel aux bonne âmes);

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
45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tableau</title>
</head>
<style>
        tr{text-align:center;}
        td{padding:20px;border:1px solid black;}
        .blue {background-color:#00ffff;}
</style>
<body>
<table id="latable">
	<tr>
		<td>un</td>	
		<td>deux</td>	
		<td>trois</td>	
	</tr>		
	<tr>
		<td>quatre</td>	
		<td>cinq</td>	
		<td>six</td>	
	</tr>		
	<tr>
		<td>sept</td>	
		<td>huit</td>	
		<td>neuf</td>	
	</tr>		
</table>
<script>
window.addEventListener("load",()=>{
        const t=document.getElementById('latable');
        let line;
        t.addEventListener("click",(e)=>{
                if(e.target.nodeName=="TD"){
                        if(line){line.parentNode.classList.remove("blue")};
                        e.target.parentNode.classList.add("blue");
                        line=e.target;
                }
        });
},false)
</script>
 
</body>
</html>

**L'AMI Yves** · 17/01/2020, 16h49

Mais si, c'est très simple :

Code javascript :

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

1
2
 
  document.getElementById("xxx").style.backgroundColor='transparent';

Et c'est pas du baratin : avant, ça ne marchait pas car les anciennes lignes sélectionnées restaient en bleu, et maintenant, ça n'est plus le cas (évidemment, l'id de la ligne en question n'est pas "xxx" : il faut qu'il ait été mémorisé, et, au moment de "désélectionner" la ligne, il faut être capable de le retrouver).

Est-ce que le truc qui te manquait, c'est pas "backgroundColor='transparent'", ?

Je ne me souviens pas du lien où mon ami Google m'a dit ça, mais je répète le principe : quand on donne une couleur d'arrière-plan à un élément HTML (ça n'est donc pas propre aux tableaux, à leurs lignes ou à leurs cellules), on a l'impression que ses descendants en héritent (c'est à dire que les lignes et les cellules ont le même background que le tableau, sauf spécification contraire), mais en fait ce qui se passe en réalité, c'est que les descendants ont un arrière-plan transparent : si on leur en spécifie un autre, ils l'acceptent, mais alors ils ne sont plus transparents, donc si on change l'arrière-plan du parent, ça ne changera rien pour lui. Et pour annuler cette spécification, il faut exécuter l'instruction ci-dessus.

OK ?

AMIcalement.

Couleur d'arrière plan d'une table

JavaScript

Vue hybride

Discussions similaires

Partager

Partager