Dev Faq
7
votes

Obtenir la hauteur d'une rangée de table

Comment puis-je calculer la hauteur d'une ligne (en pixels) dans une table avec JavaScript? XXX

7 commentaires

Remarque: ce n'est pas aussi simple que Clientheight , offSetheight ou Scrollheight . L'espacement des frontières sur la table entre en jeu. jsfiddle.net/xbtp1je8

@Tbrad pourquoi vous voulez inclure l'espacement des frontières? Techniquement, il ne compte pas dans la hauteur du tr . C'est un espace vide entre deux tr

@Tmaniafif Mon objectif est de déterminer la hauteur effective de la ligne d'utilisation dans une grille virtuelle avec des milliers de lignes, beaucoup de cellules. Il n'est pas rapide de mettre en milliers de rangées dans le DOM à la fois. Par conséquent, j'utilise une technique où seules les rangées visibles dans le volet de défilement (et quelques autour d'eux) sont affichées. Cela nécessite de connaître la hauteur exacte des pixels des rangées, y compris l'espacement des frontières. Sinon, le défilement sera désactivé un peu.

@Brad et pourquoi ne pas simplement lire la valeur de l'espacement des frontières et l'ajouter à la hauteur tr ?

@Temaniafif J'ai essayé cela, ce qui fonctionne pour la plupart, mais semble se briser un peu lors du zoom avant / sorti. 2px devient 1.75px d'une manière ou d'une autre. (Et c'est sans aucun ensemble explicite Set d'espacement des frontières , juste la feuille de style par défaut.)

@Brad - Je pense que le problème de zoom est lié à l'utilisation de offSetheight comme mesure de base puisqu'il renvoie un numéro arrondi. Vous pouvez utiliser getboundingClientRect (). Hauteur pour renvoyer une hauteur fractionnée et éviter le problème de zoom (je pense).

@Benvc Excellentes informations, merci!

8 Réponses :

18
votes 
function findHeights() {
            var tbl = document.getElementById('your table').rows;
            alert(tbl[0].offsetHeight); // row 1
}
1 commentaires

Vous devez également connaître l'espacement des frontières aussi.

8
votes 
document.getElementById('your_row_id').offsetHeight;
1 commentaires

si offsetheight s'applique également à déterminer la hauteur de la ligne d'un paragraphe?

4
votes 

<table id="tableId">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

2 commentaires

C'est probablement la réponse la plus proche jusqu'à présent. La seule chose est que cela ne garantira aucune ligne particulière ... juste la hauteur moyenne de tous. Cela peut ne pas avoir d'importance si toutes les lignes ont la même hauteur.

Et aussi, il existe une possibilité de déborder au-delà de la hauteur, n'est-ce pas le cas? Ensuite, comment pouvons-nous calculer en fonction du nombre de lignes?

6
votes

J'ai fait quelques calculs.

  1. Obtenez la valeur totale de hauteur li>
  2. Obtenez le TOP TOP CODE> VALUE LI>
  3. Obtenez le Rembourrage-bas Code> Valeur Li>
  4. Obtenez le Margin-top code> valeur li>
  5. Obtenez le Marge-bas code> valeur li>
  6. Obtenez la Border-Space Code> Valeur Li> ol>

    Maintenant avec toutes ces informations, nous pouvons prendre le total des huigt et moins sur les pavés, les marges et les espaces frontaliers. P>

    J'ai commenté dans le code sur ce que chaque ligne fait . p>

    p> 

    <table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<pre></pre>

6 commentaires

A appris quelque chose de nouveau, pourriez-vous expliquer GETComputerStyle (Elemnt, NULL) un peu, (qu'est-ce que NULL fait)

@ Bankit the null est en fait un pseudoplement. Dans ce cas, nous n'en avons pas, alors j'ai défini est comme null. J'ai étudié cela à w3schools.com/jsref/jsref_getcomputedstyle.asp . Vous pouvez l'utiliser comme référence. C'est une option facultative.

Cela ne répond pas à la question, car il ne correspond pas à l'espacement des frontières. Il est également dangereux de supposer que les mesures vont toujours être en pixels.

@Brad fenêtre.getComp députétyle (elmnt, null) .getPropertyValue ('Top de rembourrage'); Var Paddedhe retournera toujours la valeur en pixels. Même si le rembourrage est dans % , il obtiendra la valeur de pixel de celui-ci. Essayez de changer la valeur de rembourrage CSS à 5% et vous pouvez le voir.

@Gosi intéressant, ne savait pas ça! Merci pour l'information.

@Brad j'ai ajouté des calculs pour frontière-espace et a mis à jour la réponse. Maintenant, nous pouvons prendre une hauteur totale pour réduire le rembourrage, les marges et les espaces frontaliers.

5
votes

Si vous souhaitez obtenir une hauteur de ligne de table précise, vous devez utiliser ollement.getboundingClientRect () code> plutôt que élément.offSetheight code> afin d'obtenir une hauteur fractionnée plutôt qu'une figure arrondie. 

<table>
  <tr id="single">
    <td>Cell</td>
  </tr>
</table>
<table>
  <tr id="top">
    <td>Cell</td>
  </tr>
  <tr id="middle">
    <td>Cell</td>
  </tr>
  <tr id="bottom">
    <td>Cell</td>
  </tr>
</table>

1 commentaires

C'est plus précis ... mais c'était 1 pixel plus que dans la réalité.

0
votes

Désolé a été gâché là-bas une seconde xxx

si vous devez l'obtenir, vous pouvez donner le tri un identifiant et utiliser getElementyid (). offsetheight

0 commentaires
1
votes 

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

0 commentaires
0
votes

Si la table peut être défilée .. La hauteur est nécessaire pour faire défiler l'endroit où xxx

plus précis autant que je puisse voir ...

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO