Couleur d'arrière plan d'une table

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

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, 09h03

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, 09h17

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, 13h22

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

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

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, 17h49

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.

**javatwister** · 17/01/2020, 18h27

Merci de m'aider à comprendre...

Je ne parlais pas de ça!

D'ailleurs, si tu mettais un peu de code, on verrait mieux comment tu as résolu ton problème.

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

Mais alors, tu parlais d'autre chose que de mon sujet, ou je ne comprends plus le français.

Je pourrais mettre des kilomètres de code, je ne vois pas ce que ça apporterait : est-il intéressant de savoir comment je mémorise l'ID de la ligne sélectionnée ? Hors sujet, à mon avis. J'ai mis tout le code qui me semble pertinent avec mon sujet : "si l'on spécifie un arrière-plan pour une ligne d'un tableau, comment efface-t-on cette indication ?"

Bon, en revenant sur ce que j'ai mis comme code, il est vrai que mon

Code javascript :

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

lien.bgColor='#00FFFF';

n'était pas très clair : j'aurais plutôt dû écrire

pour surligner une ligne d'id "xxx" d'un tableau :

Code javascript :

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

document.getElementById("xxx").style.backgroundColor=#00FFFF';

pour annuler cette action :

Code javascript :

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

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

What else ?

AMIcalement.

**javatwister** · 17/01/2020, 19h30

Envoyé par L'AMI Yves

est-il intéressant de savoir comment je mémorise l'ID de la ligne sélectionnée ? Hors sujet, à mon avis.

Mais non, au contraire c'est une bonne partie du problème: comment être le plus efficace possible pour effectuer cette opération? Nos lecteurs ont le droit de savoir!

**L'AMI Yves** · 17/01/2020, 20h32

Non, je ne publierai pas ce code, j'estime qu'il est beaucoup trop spécifique de mon problème : la page principale de ce site est cette fameuse table, qui reflète le contenu d'un base MySQL. Cette table est présentée avec une ligne d'en-têtes de colonnes et un pied de page qui ne bougent pas, et, entre les deux, une "fenêtre" où les lignes de la table peuvent défiler (ascenseur vertical sur la droite). Réaliser cela en HTML n'est déjà pas si évident. De plus, cette page principale code une <div> invisible, destinée à recevoir les détails de la ligne sélectionnée, pour permettre à l'utilisateur d'y faire toutes les modifications voulues : cette <div> est donc en "display="none". Lorsque l'utilisateur sélectionne une ligne, cela lance une fonction javascript qui remplit la <div> avec le contenu de la ligne, et l'affiche (display="block"). Cette div contient une formulaire, avec des champs <input> et des <button>...

Faut-il que je continue ? En fait, cette description est incomplète : comme il peut y avoir deux sortes de lignes assez différentes dans la table de départ, il y a en fait deux <div> invisibles...

J'arrête là : c'est un problème très intéressant pour moi, mais je doute de son intérêt sur ce forum...

AMIcalement.

**NoSmoking** · 18/01/2020, 12h26

Bonjour,

Envoyé par L'AMI Yves

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"

Cela reste le grand B.A.b.a. du CSS et il est bon de temps en temps de revenir aux sources de l'information !

Ressource :

↪ 17.5.1 Table layers and transparency

Envoyé par javatwister

D'ailleurs, si tu mettais un peu de code, on verrait mieux comment tu as résolu ton problème.

mon pauvre javatwister tu apprendras vite que L'AMI Yves est preneur et non donneur et qu'il a le don de noyer le poisson dans ses discussions

**L'AMI Yves** · 18/01/2020, 18h52

@NoSmoking
Pourquoi tant de haine ? C'est vrai qu'il est arrivé (par toi ?) que je reçoive des commentaires pas toujours amènes sur ma façon de coder, ça rend l'épiderme un peu délicat.

Pour ce qui est de "preneur" et "donneur", je conteste : je ne me considère pas suffisamment "expert" pour pérorer sur les forums, mais quand je pose un problème et que je trouve la solution, je la publie : tout le monde ne peut pas en dire autant.

Quant à "noyer le poisson", je suppose qu'il faut comprendre que ça concerne ma façon d'expliquer les choses. J'ai l'esprit fait comme ça, voila tout ce que je peux dire. Ne sommes pas tous dans l'obligation de prendre les autres comme ils sont ?

AMIcalement.

Couleur d'arrière plan d'une table

JavaScript

Discussions similaires

Partager

Partager