Récupérer la hauteur des "tr" d'un "tbody"

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:

---

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

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:

---

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:

---

1 2 3 4 5 6

Array.forEach( document.querySelectorAll("#body tr"), function($tr) { console.log(window.getComputedStyle($tr).height); } );

---

Bonjour,

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

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

Code:

---

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

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