Discussion :

[lika_lika]

Bonjour,

Je souhaite récupérer la hauteur des lignes de ma table (uniquement les lignes qui sont dans un 'tbody').
Le 'tbody' a un identifiant et les 'tr' n'ont pas d'identifiants.
Je voulais savoir s'il est possible de récupérer tous les enfants de type 'tr' du 'tbody'

Code :

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

1
2
3
4
5
6
 
var tableauEnfantsBody = document.getElementById("body").getElementsByTagName("tr");
for (var i = 0; i < tableauEnfantsBody.length; i++) {
   var hauteur = tableauEnfantsBody[i].height;
   alert("hauteur : "+ hauteur);
 }

Dans la hauteur, j'obtiens : undefined.

Comment ça se fait ?

Merci d'avance

[Watilin]

Il n'y a pas d'attribut height sur un <tr>. Ce que tu cherches c'est la valeur CSS height.

Mieux encore, JavaScript te permet d'avoir la valeur en temps réel et exprimée en pixels grâce à la méthode globale getComputedStyle.

En reprenant ton code ça donne ça :

Code :

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

1
2
3
4
5
var tableauEnfantsBody = document.getElementById("body").getElementsByTagName("tr");
for (var i = 0; i < tableauEnfantsBody.length; i++) {
   var hauteur = window.getComputedStyle(tableauEnfantsBody[i]).height;
   alert("hauteur : "+ hauteur);
 }

Ça c'est ma propre façon de faire. Charge la page avec ta console ouverte (F12) pour voir le résultat.

Code :

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

1
2
3
4
5
6
Array.forEach(
  document.querySelectorAll("#body tr"),
  function($tr) {
    console.log(window.getComputedStyle($tr).height);
  }
);

[lika_lika]

Bonjour,

Merci, ça marche!
J'ai même l'impression qu'il prend en compte la bordure dans la hauteur.

[NoSmoking]

Bonjour,
pourquoi ne pas utiliser la collection rows de l'objet tbody?

Code :

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

var lstTR = document.getElementById("body").rows;

et il est peut être plus intéréssant de récupérer le offsetHeight de ces éléments plutôt que le height (CSS) qui peut être décimal.

Pour avoir plus de détail (MDN mais il en existe d'autres)

• offsetHeight
• scrollHeight
• clientHeight

[Watilin]

J'aurais mis +2 si j'avais pu. rows et offsetHeight sont à la fois plus efficaces et plus pratiques que ma solution