我有两个包含各种元素（span，input，select，...）的html表格，我想强制这些表格的行具有相同的高度。不幸的是，在tr或td上设置属性“高度”不起作用（如果该行包含至少一个超过给定高度的元素，则该行更高）。使用Javascript设置高度很慢
我还没有找到一种方法，我可以用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");
}
}
}
3 回答
不知道关于这个的原因，但：
设置的line-height风格TD应该增加td的高度会增加tr的高度。 如果不是，你可以设置在一个div中封装td的内容，然后在其上设置行高。
另一种方法是加速所有元素的设置。 然后在计算完高度后，设定班级的行高。这将改变所有使用这个类的元素的高度。 阅读关于Javascript的styleSheet对象，了解如何完成此操作....
您正在反复阅读，然后写入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节点列表的长度，特别是编写style.height而不是setAttribute()（较慢）。
这家伙很懒，还没有设置简介
