在窗口调整大小时重新计算表格高度

Question

我有这个功能，可以做三件事：

• 悬停
• 专注于同一行中显示的两个单独的表
• 从第一个表计算tr高度，并将该高度从第二个表设置为tr。

---

<script>
$(function() {
    var rows = $('.interactive tr');
    rows.click(function () {
        var i = $(this).GetIndex() + 1; // nth-child is 1-based
        rows.removeClass('selectedRow');
        rows.filter(':nth-child(' + i + ')').addClass('selectedRow');
    });

    rows.hover(function(){
        var i = $(this).GetIndex() + 1;
        rows.filter(':nth-child(' + i + ')').addClass('hoverx');
    },function(){         
        rows.removeClass('hoverx');
    });

    $("table:first tr").each(function(i) {
        $("table:last tr").eq(i).height($(this).height());
    });
});

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}
</script>

此函数的效果很好，但是调整浏览器大小时出现问题，因为该函数未重新计算tr高度。

这破坏了所有桌子的设计。

谁能帮我这个忙：如何调整浏览器大小时如何从第一个表重新计算tr高度，并从第二个表设置为tr。

这是fiddle example: http fiddle example: //jsfiddle.net/Ksb2W/59/

谢谢。

Answer 1

您需要将高度计算放到调整大小函数中，并保持原来的高度不变，这样就可以在调整大小函数之前加载或移动到它

$(document).ready(function(){
    $(window).resize(function() {
        // get first table tr height
        // apply to second table tr height
    });
});

您可以在此处看到调整大小的调用http://jsfiddle.net/Ksb2W/103/

Answer 2

这不是一个完整的答案，但是有几件事需要检查，以确保您能顺利前进。

• 暂时放置一个按钮或将调用您的调整大小功能的内容。 然后调整窗口大小，然后调用该函数。 这将告诉您问题是使用$(window).resize触发函数还是函数本身。

• 如果问题出在函数本身，则可能是您的某些问题出在浏览器缓存中。 尝试先调用.hide（），然后再调用.show（）。