javascript - 基于从文本获取高度的 <td> 控制表格行高

Question

我有一个表，其中包含一些行和 2 列。一列包含图像，另一列包含文本。这些图像是我调整大小的大图像(意思是，它们从容器中获取高度)。我需要该行从 textCell 获取其高度。由于文本的数量在一行中是可变的，所以我无法指定一个明确的高度。 但是考虑到图像大于文本的大小，该行的高度来自 imageCell 而不是 textCell。我如何让行和 imageCell 占据 textCell 的高度？

<table  border="0" cellspacing="0" cellpadding="0" id="articleTable">
    <tr id="row-1" class="articleRow light" >
        <td class="imageCell" id="image-cell-1">
            <img src="images/Support/CFD.png" alt="" class=""/>
            <img src="images/Support/CFD3.png" alt=""  class="" />
        </td>
        <td class="textCell" id="text-cell-1" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>

    </tr>
    <tr id="row-2" class="articleRow dark" style="">
        <td class="textCell" id="text-cell-2" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>
        <td class="imageCell"  id="image-cell-2">
            <img src="images/Support/TM2.png" alt=""   class="" />
            <img src="images/Support/TM1.png" alt=""   class=""/>
        </td>
    </tr>

Answer 1

也许像这样的一些 Javascript 方法:

var txts = document.getElementsByClassName("textCell");
for(var i=0; i<txts.length; i++) {
    var h = txts[i].getElementsByClassName("articleTextWrapper")[0].offsetHeight;
    txts[i].parentNode.style.height = h + "px";
}

这将为 <tr> 设置固定高度相对于单元格内文本的高度，使您能够将图像设置为全高。