动态表的单元格高度

Cell height of a Dynamic table

本文关键字：高度 单元格 动态      更新时间：2023-09-26

我有一个动态html表（它从带有Jinja for循环的数据库文件中获取内容）。第一列包含一个人的图片和用户名。我想根据名为"fitin"的父div的固定高度调整用户名的字体大小，这样当名称较长时，它会变小，而不是转到第二行。

这是我的html代码：

<tdody>
    {% for i in players %}
        <tr>
            <td>
                <div class='fitin'>                             <!-- in css file, .fitin {height: 50px;} -->
                    <div>
                        <img src=''> <p class='username'>{{ i.username }}</p>    <!-- in css file, p {display: inline;} -->
                    </div>
                </div>
            </td>
            <td>{{ i.join_date }}</td>
        </tr>
    {% endfor %}
</tbody>

和javascript代码：

$(document).ready(function() {
    $('table tr').each(function(){
        console.log($('.fitin').height());        // I get 50 for '.fitin'
        console.log($('.fitin div').height());    // and something like 33 for all the '.fitin div'
    });
});

目前，我的问题是，我无法在div"fitin"中获得反映实际高度的div的正确高度，相反，我为每一行都获得了一个固定的数字，即使显示的表在图片的下一行包含一些长用户名。

你能告诉我我做错了什么吗？

感谢

试试这个，让我知道。。。

var cHeight1 = document.getElementsByClassName('.fitin').clientHeight;
var cHeight2 = document.getElementsByClassName('.fitin div').clientHeight;

或

var oHeight1 = document.getElementById('.fitin').offsetHeight;
var oHeight2 = document.getElementById('.fitin div').offsetHeight;

希望这能有所帮助。。

您发布的代码不是HTML，而是您的模板代码。如果您将损坏实例的实际HTML输出作为JSFiddle发布，那将是理想的选择。

看完你的评论，我现在明白你的问题了。你总是得到第一个.fitin分区

$('table tr').each(function(){
    console.log($(this).find('.fitin').height());        // I get 50 for '.fitin'
    console.log($(this).find('.fitin div').height());    // and something like 33 for all the '.fitin div'
});

现在您将参考每个<tr>的子.fitin。

相关文章：