7

我有两个单独的表，我在每个 tr 上使用 focus+hover 函数同时在两个表上都很好用，我的问题是 td 高度，因为如果第一个表中的 td 描述更大，将显示在两行相同的 td 和 td 的高度将被修改，但仅限于第一个表 td。如何记住第一个表中 td 的高度并将其添加到第二个表中的 td 以使两个 td 大小相同。在我的示例中，由于第一个表 td 的描述，仅前两个 tr 显示正常，其他两个显示不正常。

小提琴示例：http: //jsfiddle.net/Ksb2W/45/ 

   for bounty  please check this example to see the difference on chrome and ie8:

http://mainpage.ueuo.com/

谢谢你。

4

7 回答 7

22

如果我对您的理解正确，您希望两个表的每一行中的高度相同吗？

如果是这样，这应该工作：

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

显然:firstand:last选择器的使用并不理想，你应该将那些修改为id选择器。

示例小提琴

更新

您在赏金中提到的问题的解决方案是因为td没有考虑元素的边界。

检查当前行时替换height()为，它应该可以正常工作：outerHeight()

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).outerHeight());
});
于 2012-04-27T13:42:01.333 回答
3

获取所有元素的最大高度，tr然后将所有trs 的高度设置为这个高度：

// get all heights
var heights = rows.map(function () {
    return $(this).height();
}).get();

// use max to get the max !
var maxHeight = Math.max.apply(null, heights);

// set the height
rows.height(maxHeight);

工作示例

（我想我可能误解了你的问题......这会将所有trs 的高度设置为相同的高度）

于 2012-04-27T13:40:23.580 回答
3

在表格上添加一些 id 并添加这段代码：

var rows1 = $("#first tr");
var rows2 = $("#second tr");

rows1.each(function() {
    $(rows2[$(this).index()]).height($(this).height());        
})

这是工作的jsFiddle：http: //jsfiddle.net/Ksb2W/51/

于 2012-04-27T13:45:10.253 回答
2

为了做你想做的事，你可以只有一个表，其中有一个空列，两部分之间没有边框。这样，单元格高度仍将根据内容动态变化，但也会从表格两侧展开行中的所有单元格。

于 2012-04-27T13:43:02.243 回答
2

这将即时调整行高

$(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').height($(this).children('td')[0].offsetHeight);
    });

    rows.hover(function(){
        var i = $(this).GetIndex() + 1;
        rows.filter(':nth-child(' + i + ')').addClass('hoverx').height($(this).children('td')[0].offsetHeight);;
    },function(){         
        rows.removeClass('hoverx');
    });
});

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}
于 2012-04-27T13:46:59.443 回答
2

好吧，我想我来晚了，您可以在这里看到固定第二张桌子高度的按钮：

http://jsfiddle.net/Ksb2W/54/

您可以将该行代码放在您的 document.ready 函数中，它应该可以解决问题：

$(function(){
    $('#c').attr('height', $('#b').css('height'));
});

<td>使用此属性修改元素的 CSS 也很重要：

box-sizing:        border-box;

这是一个强大的解决方案，它将匹配 table 指定的 2 个表的所有行高id。document.ready 函数中的 4 行，无需直接更改 css：

$('td').css('box-sizing','border-box');
$('#t2').children().children().each(function(i, value) {
    $(this, ':nth-child(1)').attr('height', $('#t1').children().children(':nth-child(' + parseInt(i + 1) + ')').css('height'));
});

在这里查看小提琴：http: //jsfiddle.net/Ksb2W/55/

于 2012-04-27T13:57:30.670 回答
2 
    $('#t1 tr').each(function(i) {
    if ($(this).height() > $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $('#t2 tr:nth-child(' + (i + 1) + ')').height($(this).height());
    else if ($(this).height() < $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $(this).height($('#t2 tr:nth-child(' + (i + 1) + ')').height());
});

将此添加到您的小提琴中，如果其对应值更大，则会调整每一行的大小。在这种情况下，尽管您必须提供表格 ID。就像在这个小提琴中：http: //jsfiddle.net/Ksb2W/88/

于 2012-05-08T12:13:43.437 回答