Couleur d'arrière plan d'une table

Version imprimable

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

Couleur d'arrière plan d'une table
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:

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:

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.
17/01/2020, 08h03
javatwister

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.
17/01/2020, 08h17
L'AMI Yves

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.
17/01/2020, 12h22
javatwister

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

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

Code:

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>

17/01/2020, 16h49
L'AMI Yves
Mais si, c'est très simple :
Code:

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.
17/01/2020, 17h27
javatwister

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.
17/01/2020, 18h17
L'AMI Yves

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:

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:

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

pour annuler cette action :

Code:

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

What else ?

AMIcalement.
17/01/2020, 18h30
javatwister

Citation:

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! :ptdr:
17/01/2020, 19h32
L'AMI Yves

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.
18/01/2020, 11h26
NoSmoking

Bonjour,

Citation:

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

Citation:

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

:dehors:
18/01/2020, 17h52
L'AMI Yves

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