我有两个HTML表，其中包含各种元素（跨度，输入，选择，...），我想强制这些表的行具有相同的高度。不幸的是，设置tr或td上的属性"高度"不起作用（如果行包含至少一个超过给定高度的元素，则该行更高）。
我还没有找到一种方法，我可以用CSS强制行高度，因此我编写了一个JavaScript函数，该功能在所有行上循环，请检查左表的高度，并使用相应行的高度正确的表，如果它们不同，我将高度（更改样式）设置为最大价值。
它有效...但是如果桌子有很多行，它非常慢！我认为这是由于每种变更对样式都会引起反流的事实。
有提示吗？请注意，我不能合并两个表。
在这里我的代码被剥离了，但也许我需要一种完全不同的方法...
var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");
for (chr=0;chr < leftTableRows .length;chr++) {
var rowLeft = leftTableRows [chr];
var heightleft = rowLeft.offsetHeight;
var rowRight = rightTableRows[chr];
var heightright = rowRight.offsetHeight;
if(heightleft != heightright){
console.log("left: "+heightleft +" - right: "+heightright);
if(heightleft>heightright){
rowRight.setAttribute("style","height:"+heightleft+"px");
}else{
rowLeft.setAttribute("style","height:"+heightright+"px");
}
}
}
您反复阅读然后写入DOM。这被认为是表演的重要禁忌。适当的方法是完成所有"读取"，然后进行所有"写入" - 否则，您将在中间强制反射/计算。实际上，您会更好地使用两个循环，一个循环找到正确的高度，然后一个应用它们的一个：
var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");
var length = leftTableRows.length;
var heights = [];
for (var chr = 0; chr < length; chr++) {
var rowLeft = leftTableRows[chr];
var heightleft = rowLeft.offsetHeight;
var rowRight = rightTableRows[chr];
var heightright = rowRight.offsetHeight;
if (heightleft > heightright) {
heights.push({
elem: rowRight,
height: heightleft
});
} else {
heights.push({
elem: rowLeft,
height: heightright
});
}
}
for (var i = 0; i < heights.length; i++) {
heights[i].elem.style.height = heights[i].height + 'px';
}
现在，元素及其新高度被存储在数组中，然后您只能在数组上迭代。第一个循环后，您再也不会从DOM上读取。其他优化包括删除不需要的if()语句，缓存HTML Nodelist的长度，特别是编写style.height而不是setAttribute()（较慢）。
不知道细胞的最大高度。您可能应该将表转换为Divs并使用显示Flex。
这将使您拥有所需的行为，但意味着您更改了HTML代码的构建。
而不是拥有第一张表的元素和第二个表的元素，而是必须交替。
我要去从Jfriend00的答案中获取摘录。肯定要支持他们的答案。
dom修改
- 回流已排队。 ....
-
请求某些属性可以触发立即的回流。上述规则有例外，您需要确保避免使用。例如，如果您请求某些需要正确布局以准确地报告属性值的属性，并且先前的修改中有一个待处理的布局，则浏览器可以在返回您要求的属性之前同步中继文档。这些类型的属性通常涉及诸如屏幕位置和其他属性，显然会受文档布局影响。如果您想找到更多的详细信息，则有许多有关此主题的文章。在许多情况下，您的代码不会无论如何都不会使用这些属性，但是如果是，通常的解决方法是首先请求所有必要的属性，然后再对DOM进行任何更改。
-
批次一次您的所有DOM更改。最糟糕的事情是进行DOM更改，等待几个MS，用计时器等等，进行另一个DOM更改，等待几个MS带有计时器，依此类推，因为您将具有DOM更改，重新绘制，DOM更改，重新绘制，重新涂片等...相反，请确保您在一个同步的JavaScript中立即进行所有待处理的DOM更改。然后，这将允许浏览器排队回流和重新粉刷，并在您进行所有DOM更改后仅执行一次。如果您想对批处理变得更聪明，则将对同一元素进行崩溃的修改，以便仅使用最终值对其进行处理一次。因此，如果首先给出了Elementa的新值3，然后在同一批中后来给出了4个值，则在处理数据批次时，您需要跳过3并处理4。
<。 -
有时可以优化DOM修改。 ....
点2和3非常相关，您要选择每行，然后设置一个新值。因此，更改未分解。每个更改都会引起反流
要优化，读取所有行并保存内存中的所有待处理更改。然后将新的排高度应用于新循环中。从内存中汲取新值的位置。
不确定其原因，但是：
将线路高风格设置为TD应增加TD的高度，以增加TR的高度。如果没有
加快速度的另一个选择是将相同的样式类设置为所有元素。然后，在计算高度后，设置了类的线路高度。这将改变使用此类的所有元素的高度。阅读有关JavaScript的样式表对象，以了解如何完成此操作....