如何使用javascript获取表格行的高度？
答案 0 :(得分：5)
function findHeights() {
var tbl = document.getElementById('your table').rows;
alert(tbl[0].offsetHeight); // row 1
}
答案 1 :(得分：5)
我已经做了一些计算。
padding-top值padding-bottom值margin-top值margin-bottom值border-space值现在有了所有这些信息，我们就可以减去填充，边距和边框空间的总高度和负值。
我已经在代码中注释了每一行的作用。
var elmnt = document.getElementsByTagName("td")[0];
var totalHeight = elmnt.offsetHeight; // gets the total height value inclusive of all paddings & margins
// The following is to get the padding-top, padding-bottom, margin-top, margin-bottom values
var paddedHeightTop = window.getComputedStyle(elmnt, null).getPropertyValue('padding-top');
var paddedHeightBottom = window.getComputedStyle(elmnt, null).getPropertyValue('padding-bottom');
var marginHeightTop = window.getComputedStyle(elmnt, null).getPropertyValue('margin-top');
var marginHeightBottom = window.getComputedStyle(elmnt, null).getPropertyValue('margin-bottom');
var borderHeight = window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing');
// To remove the px from the string so we can use it as an integer to subtract from total value.
var newPaddedHeightTop = paddedHeightTop.substring(0, paddedHeightTop.length - 2); // remove the px
var newPaddedHeightBottom = paddedHeightBottom.substring(0, paddedHeightBottom.length - 2); // remove the px
var newMarginHeightTop = marginHeightTop.substring(0, marginHeightTop.length - 2); // remove the px
var newMarginHeightBottom = marginHeightBottom.substring(0, marginHeightBottom.length - 2); // remove the px
var newBorderHeight = borderHeight.substring(0, marginHeightBottom.length - 2); // remove the px
// Take the total and minus of all these paddings, margins and border-space
var finalHeight = totalHeight - newPaddedHeightTop - newPaddedHeightBottom - newMarginHeightTop - newMarginHeightBottom - newBorderHeight;
alert(totalHeight + " (total height) - " + newPaddedHeightTop + " (padding-top) - " + newPaddedHeightBottom + " (padding-bottom) - " + newMarginHeightTop + " (margin-top) - " + newMarginHeightBottom + " (margin-bottom) - " + newBorderHeight + " (border-space) = " + finalHeight);td {
height: 50px;
padding: 2px;
border-spacing: 2px 3px;
}<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
<pre></pre>
我添加了css，只是为了让您看到它确实减去了所有填充值，并给出了td的确切高度。
更新1：添加了border-space的计算。
var borderHeight = window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing');
此外，如评论中所述，window.getComputedStyle(elmnt, null).getPropertyValue('-webkit-border-vertical-spacing')以像素为单位获取值，因此即使以百分比设置，它也会检索其像素值。
因此，我们几乎可以仅获取height的总值，然后减去所有填充，边距和边框空间。
答案 2 :(得分：4)
var tableHeight = document.getElementById("tableId").offsetHeight;
var totalRowInTable = document.getElementById("tableId").rows.length;
//So here we have total height of table and total <tr> tags, so tableHeight / total <tr> tag will gave each <tr> tag height.
var trTagHeight = tableHeight/totalRowInTable;
console.log(trTagHeight);
//Note: This is approx value of each row, excluding padding and cell padding value.<table id="tableId">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
答案 3 :(得分：3)
如果要获取准确的表行高度，则应使用Element.getBoundingClientRect()而不是Element.offsetHeight来获得小数高度而不是四舍五入的数字。
document.querySelector('tr').getBoundingClientRect().height;
如果您还希望在计算表行高时包括border-spacing，则需要决定如何将其分配给每一行（因为它实际上是行之间的空间，而不是任何特定行的一部分） ）。另外，请确保检查表的border-collapse属性是否设置为collapse（如果是，则表中不包含border-spacing）。
在下面的代码段中，为第一行/最后一行分配了上/下不与另一行共享的空间，各行之间的所有空间均被共享。这样可以确保所有行高的总和等于工作台高度。
或者，您可以选择不将第一行上方或最后一行下方的空间分配给任何行，因为此空间不包括在<thead>或<tbody>元素的高度计算中，因此该空间可以分配给那些元素，而不是行本身。
const getRowHeight = (tr) => {
let height = tr.getBoundingClientRect().height;
let table = tr.closest('table');
let style = window.getComputedStyle(table);
let collapse = style.getPropertyValue('border-collapse');
let space = parseFloat(
style.getPropertyValue('border-spacing').split(' ')[1].replace(/[^\d.]/g, '')
);
if (collapse === 'separate') {
if (table.rows.length === 1) {
height += space * 2;
} else if (tr.rowIndex === 0 || tr.rowIndex === table.rows.length - 1) {
height += space + space / 2;
} else {
height += space;
}
}
return height;
}
// comments below are examples only (will change based on defaults, zoom, etc)
console.log(getRowHeight(document.querySelector('#single')));
// 24 (20px row height + 2px space above + 2px space below)
console.log(getRowHeight(document.querySelector('#top')));
// 23 (20px row height + 2px space above + 1px space below)
console.log(getRowHeight(document.querySelector('#middle')));
// 22 (20px row height + 1px space above + 1px space below)
console.log(getRowHeight(document.querySelector('#bottom')));
// 23 (20px row height + 1px space above + 2px space below)<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>
答案 4 :(得分：1)
document.getElementById('your_row_id').offsetHeight;
答案 5 :(得分：0)
var table_elements = document.querySelector("table>tbody");
var i;
for (i = 1; i <= table_elements.rows.length; i++) {
var row_selector = "table>tbody>tr:nth-child(" + [i] + ")";
var table_row = document.querySelector(row_selector);
var vertical_spacing = window.getComputedStyle(table_row).getPropertyValue("-webkit-border-vertical-spacing");
var margin_top = window.getComputedStyle(table_row).getPropertyValue("margin-top");
var margin_bottom = window.getComputedStyle(table_row).getPropertyValue("margin-bottom");
var row_height= parseInt(vertical_spacing, 10)+parseInt(margin_top, 10)+parseInt(margin_bottom, 10)+table_row.offsetHeight
console.log("The height is: "+row_height+"px");
}<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
您可能会找到一种更好的方法来遍历
从tbody获取所有表行，并使用nth-child循环遍历所有表行。
然后设置行（var row_selector），并获取其垂直间距，边距（顶部和底部）和offsetHeight（元素高度，填充等）。
由于offsetHeight仅获取填充，边框和滚动条，而没有空白，因此我们需要像垂直边框间距一样获取计算出的样式值。
最后，它将垂直边框间距和边距值解析为一个Int并将其添加到offsetHeight并将最终值记录到控制台。
答案 6 :(得分：-2)
抱歉在那儿弄糟了
<table>
<tr onclick="alert(this.offsetHeight)>
<td >
Hey
<br />
You
</td>
</tr
</table>
如果需要获取它，可以给tr一个ID并使用getElementById（）。offsetHeight