Thead fixe sur première ligne lors d'un scroll

**rlelamer** · 24/09/2018, 15h57

Effectivement c'est pas inée chez moi de regarder dans la console et surtout de mettre des console.log(), il faut aussi savoir correctement les placer ... J'ai compris la leçon.

1 - Aux lignes 31 et 60 j'ai ceci
# L31:

Code JS :

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

let tableHeadFixed = tableDivWrap.children[0];

# L60, 61, 62:

Code JS :

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

1
2
3
window.onload = function(){
  table_thead_fixed();
}

2 -

Peux-tu copier-coller le bout de code de la <table> qui s'affiche dans la console (important)
Il faut vérifier que les éléments ont bien été créés (thead fixe,...)

Pour ce point, où veux tu que je place les console.log pour obtenir l'info ?
Là je vois pas et j'ai le cerveau en ébullition ...

Edit: je crois avoir compris, je reprends tout à l'heure.

Invité · 24/09/2018, 17h05

Il suffit juste de copier-coller (ou faire une copie d'écran) de la portion de code HTML, affichée dans l'onglet "Inspecteur".

**rlelamer** · 24/09/2018, 17h53

J'viens d'essayer
En console j'ai un "undefined" ...

Pour l'autre méthode, c'est ça que tu souhaites obtenir ?

Invité · 24/09/2018, 18h16

1-

En console j'ai un "undefined" ...

Normal, je me suis planté

Ce n'est pas possible (il faudrait créer une variable dans la fonction displayTable pour pouvoir l'afficher)

2- Donc, la bonne méthode est effectivement de regarder dans l'onglet "console", et faire :

un copier-coller
ou une copie d'écran (comme tu as fait)

3- Explique pourquoi tu montres 2 copies d'écran ?
Et surtout à quoi correspondant-elles ? (si tu ne mets pas d'explications, on ne peut pas deviner...)

Par contre, on remarque qu'il manque le <div class="tbody-scroll"...> dans la 1ere copie d'écran...

**rlelamer** · 24/09/2018, 18h21

J'en ai mis 2 car je m'aperçois que dans la <div class="thead-fixed"> les temps sont convertis a UTC+2 alors que dans la <div class:"tbody-scroll"> les temps sont restés à CEST.

Invité · 24/09/2018, 18h31

C'est bon, je crois avoir compris...

Ta fonction displayTable() :

génère les données à afficher ("à la volée")
puis les "injecte" dans la balise "" dont l'id est "pointsTable".

Quant à la fonction table_thead_fixed(), au chargement de la page (!!!) :

crée un CLONE de TOUTE la table dans un div "theader-fixed" (données comprises)

Du coup, quand tu modifies le contenu de "pointsTable" (via la fonction displayTable), le contenu de "theader-fixed" n'est pas modifié !!

[EDIT]

C'est même PIRE : en fait l'id "pointsTable" est aussi cloné !
Or, un id DOIT ETRE UNIQUE !

Voici la faille dans le système !

Invité · 24/09/2018, 18h42

Si je n'ai pas fait d'erreur, voici une "rustine" :

Code JavaScript :

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
function table_thead_fixed() {
  // on peut avoir plusieurs tables
  let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
  tableDivWraps.forEach(function(tableDivWrap)
  {
    // table avec entete fixe
    let tableRef = tableDivWrap.children[0]; // table
 
    // on entoure la table d un div
    let tableBodyScroll = document.createElement("div");
    tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
    tableDivWrap.insertBefore(tableBodyScroll, tableRef);
    tableBodyScroll.appendChild(tableRef);
 
    // entete fixe : copie (clone) de la table
    let tableHeadFixed = document.createElement("div"); // "theader-fixed"
    tableHeadFixed.className += "theader-fixed";
    tableHeadFixed.appendChild(tableRef.cloneNode(true));
    tableDivWrap.prepend(tableHeadFixed);
 
	// SPECIAL : on change l id 
	document.querySelector('#theader-fixed #pointsTable').id = 'pointsTable2';
 
    // ajustement hauteur de scroll propre
    let nbLigne =
      tableDivWrap.dataset.nbreligne !== undefined
        ? tableDivWrap.dataset.nbreligne
        : 12; // défaut 12 (A ADAPTER)
    table_thead_fixed_resize(tableDivWrap,nbLigne);
  });
}

Et il faut aussi faire un changement dans displayTable :

Code JavaScript :

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
function displayTable(localTime) {
    points.forEach(function (element) {
        var row = document.createElement("tr");
        document.getElementById("pointsTable").appendChild(row);
        if (localTime) {
            var localTZ = TzToLocal(element.date, element.time, element.timezone);
            createCell(localTZ[0], row);
            createCell(localTZ[1], row);
            createCell(localTZ[2], row);
        } else {
            createCell(element.date, row);
            createCell(element.time, row);
            createCell(element.timezone, row);
        }
        var position = dmsConv(element.latitude, element.longitude);
        createCell(position, row);
        createCellWithCustomStyling(element.ttw, row, ttwStyling);
        createCellWithCustomStyling(element.dtw, row, dtwStyling);
        createCellWithCustomStyling(element.dtg, row, dtgStyling);
        createCell(element.twd, row);
        createCellWithCustomStyling2(element.tws, element.twa, row, twsStyling);
        createCellWithCustomStyling(element.twa, row, twaStyling);
        createCellWithCustomStyling(element.btw, row, btwStyling);
        createCellWithCustomStyling(element.sail, row, sailStyling);
        createCell(element.stw, row);
        createCellWithCustomStyling(element.atwa, row, atwaStyling);
        createCellWithCustomStyling(element.abtw, row, abtwStyling);
        var manifest = chrome.runtime.getManifest();
        document.getElementById("version").innerHTML = manifest.version;
    });
 
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
}

**rlelamer** · 24/09/2018, 18h59

J'ai mis en place ton code

Voici ce que ça donne:
# Checkbox non cochée :

On y voit que le scroll n'est plus là et qu'une demi colonne fait son apparition à droite

En console ça donne ceci:

# Checkbox cochée :

Le scroll n'est pas là et la demi colonne à droite à disparue.

En console :

Invité · 24/09/2018, 19h04

Forcément..... "theader-fixed" n'est pas un id, mais une classe.

Code JavaScript :

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

1
2
3
 
	// SPECIAL : on change l id "pointsTable" -> "pointsTable2"
	document.querySelector('.theader-fixed #pointsTable').id = 'pointsTable2';

N.B. ARRETE de nous mettre tes copies d'écran du TABLEAU !!

Ca n'apporte RIEN !

**rlelamer** · 24/09/2018, 19h14

Ok compris, plus de screen du tableau ...

Donc avec cette correction ça fonctionne mais j'ai toujours des erreurs en console

# checkbox non cochée :

# checkbox cochée :

Invité · 24/09/2018, 20h18

normal...
A priori, au chargement, le tableau est d'abord rempli : "pointsTable2" n'existe pas encore.

Essaie :

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2").length > 0 )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2") )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2") != null && document.getElementById("pointsTable2") != 'undefined' )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

**rlelamer** · 24/09/2018, 20h42

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2").length > 0 )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2") )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
function displayTable(localTime) {
....
	// SPECIAL : on CLONE le contenu dans "pointsTable2" :
	if( document.getElementById("pointsTable2") != null && document.getElementById("pointsTable2") != 'undefined' )
	{
		document.getElementById("pointsTable2").innerHTML = document.getElementById("pointsTable").innerHTML;
	}
}

Voila ce que donne les codes

Cette erreur est récurrente avec ou sans checkbox cochée

Invité · 24/09/2018, 21h06

Arghhh... C'est entièrement de ma faute...

Mes fonctions ~~sont~~ étaient fausses......

(quand je te disais qu'il fallait faire preuve de "logique"... Je me suis planté... Ah ! Il est beau, le "donneur de leçons ! )

Maintenant que j'ai corrigé, ça devrait fonctionner sans accrocs : https://codepen.io/jreaux62/pen/eLoOKM

Code JavaScript :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"use strict";
// ----------
function table_thead_fixed() 
{
	// on peut avoir plusieurs tables
	let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
	tableDivWraps.forEach(function(tableDivWrap) 
	{
		// ----------
		// table avec entete fixe
		let tableRef = tableDivWrap.children[0]; // table
		// ----------
		// on entoure la table d un div
		let tableBodyScroll = document.createElement("div");
		tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
		tableDivWrap.insertBefore(tableBodyScroll, tableRef);
		tableBodyScroll.appendChild(tableRef);
		// ----------
		// entete fixe : copie (clone) de la table
		let tableHeadFixed = document.createElement("div"); // "theader-fixed"
		tableHeadFixed.className += "theader-fixed";
		tableHeadFixed.appendChild(tableRef.cloneNode(true));
		tableDivWrap.prepend(tableHeadFixed);
		// ----------
		// SPECIAL : on change l id "pointsTable" -> "pointsTable2"
		document.querySelector('.theader-fixed #pointsTable').id = 'pointsTable2';
		// ----------
	});
	// ----------
	// ajustement hauteur de scroll propre
	table_thead_fixed_resize();
}
// --------------------
// Redimensionnement de la fenêtre (horizontal)
function table_thead_fixed_resize() 
{
	// on peut avoir plusieurs tables
	let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
	tableDivWraps.forEach(function(tableDivWrap) 
	{
		let nbLigne = tableDivWrap.dataset.nbreligne !== undefined ? tableDivWrap.dataset.nbreligne : 12; // défaut 12 (A ADAPTER)
		// ----------
		let tableHeadFixed = tableDivWrap.children[0];
		let tableBodyScroll = tableDivWrap.children[1];
		let tableRef = tableBodyScroll.children[0];
		// ----------
		// calcul hauteur scroll-barre-X
		let hScrollBar = tableBodyScroll.offsetHeight - tableBodyScroll.clientHeight;
		// ----------
		// nombre de lignes à montrer
		let nbLigneToShow = Math.min(nbLigne, tableRef.rows.length) + 1;
		let rect1 = tableRef.rows[0].getBoundingClientRect();
		let rect2 = tableRef.rows[nbLigneToShow].getBoundingClientRect();
		tableBodyScroll.style.height = rect2.top - rect1.top + hScrollBar + "px";
		// ----------
		// calcul pour réajustement
		let hEntete = tableRef.tHead.offsetHeight;
		// ----------
		// calcul largeur scroll-barre-Y
		let wScrollBar = tableBodyScroll.offsetWidth - tableBodyScroll.clientWidth;
		// ----------
		// réajustement du header fixe
		tableHeadFixed.style.height = hEntete + "px";
		tableHeadFixed.style.width = "calc(100% - " + wScrollBar + "px)";
		// ----------
		// synchronisation des scrolls
		tableBodyScroll.onscroll = function() {
		tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
		};
		// ----------
	});
}
 
// Activation :
window.onload = function(){
  table_thead_fixed();
}
// Redimensionnement de la fenêtre
window.onresize = function(){
  table_thead_fixed_resize();
}

**rlelamer** · 24/09/2018, 21h15

Chapeau l'artiste !

Ça fonctionne au poil et plus d'erreurs dans la console.

Merci beaucoup pour ton aide précieuse, j'ai encore énormément de chose à apprendre ... c'en est presque décourageant ...

J'ai plus qu'a me pencher sur mon dernier soucis (Obligatiion d'avoir Adblock pour que ça tourne nickel) et je pourrais sortir la MAJ.

Merci encore

**NoSmoking** · 25/09/2018, 11h38

Envoyé par rlelamer

# version NoSmoking :
popup.html
(...)
popup.css
(...)
resizeTables.js
(...)

A l'avenir merci de ne pas faire du patchwork avec les codes, cela t'épargnera bien des soucis

Le bon code est à la réponse à ton questionnement : Pourquoi le scroll fonctionne bien sur le tableau mais pas sur le header ?

Nota : La logique est que lorsque l'on modifie les données du tableau il te faut refaire ton « entête scrollable », (mais peut être déjà dit, je n'ai pas repris l'intégralité de la suite de la discussion).

Invité · 25/09/2018, 12h11

Bonjour,

@NoSmoking

Résumé de la situation :

1- 1er problème (résolu) :

en clonant la <table>, on clonait aussi le <tbody id="pointsTable"> !
du coup, on avait 2 id identiques

Résolu en modifiant dans le clone "pointsTable" -> "pointsTable2"

2- 2ème problème (résolu) :

à chaque changement (checkbox cochée/pas cochée), le <tbody> était re-généré... dans id="pointsTable"... qui était doublon (il ne considérait que le 1er -> celui dans le thead fixe)

Là aussi résolu, en clonant le contenu de "pointsTable" dans "pointsTable2".

3- 3ème problème (résolu) :

Mon code était foireux !! (erreur de logique).

Je l'ai corrigé.

Tu sais tout maintenant.

**rlelamer** · 26/09/2018, 17h31

Je suivrais vos conseils avertis pour la prochaine fois
Merci encore à vous 2, j'ai appris beaucoup de choses (même si j'ai pas tout compris des fois ...) 😉

Thead fixe sur première ligne lors d'un scroll

Défilement en CSS

Discussions similaires

Partager

Partager