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

Question

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

• tr 悬停
• 关注显示在同一行上的两个单独的表格
• 计算第一个表的 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 示例: http://jsfiddle.net/Ksb2W/59/

谢谢。

Answer 1

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

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

你可以看到这里调用了resize http://jsfiddle.net/Ksb2W/103/