Question

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

tr hover
专注于同一行显示的两个单独的表格
从第一个表计算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://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（）。

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

2 个答案: