0

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

  • 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 example: http://jsfiddle.net/Ksb2W/59/

谢谢你。

4

2 回答 2

2

您需要将高度计算放在一个调整大小函数中，同时保持您拥有的那个，这样它就可以完成加载或移动到调整大小函数之前的工作

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

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

于 2012-05-10T16:53:14.907 回答
1

这不是一个完整的答案，但有几件事需要检查，可能会让你到达你要去的地方。

  • 暂时放入一个按钮或其他会调用您的调整大小功能的东西。然后调整窗口大小，然后调用函数。这将告诉您问题是在使用$(window).resize函数本身还是在函数本身中触发函数。

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

于 2012-05-10T14:26:49.547 回答