Question

我有两个单独的表，我在每个tr上使用焦点+悬停功能同时在两个表上都很好用，我的问题是td高度，因为如果来自拳头表的td的描述更大将显示在同一td中的两行和td的高度将被修改，但仅限于第一个表td。如何从第一个表中记住td的高度，并在第二个表的td上添加该高度，以便使两个td具有相同的大小。在我的示例中，只显示前两个tr，其他两个显示不正常，因为第一个表td的描述。

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

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

http://mainpage.ueuo.com/

谢谢。

Answer 1

如果我理解正确你，你想要两个表中每一行的高度是一样的吗？

如果是这样，这应该有效：

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

显然，使用:first和:last选择器并不理想，您应该将其修改为id选择器。

Example fiddle

<强>更新

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

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

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

Answer 2

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

// 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);

Working Example

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

Answer 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/

Answer 4

要执行您想要的操作，您可能只有一个空列的表，两个部分之间没有边框。这样，单元格高度仍然是基于内容的动态，但也会从表格的两边消耗行中的所有单元格。

Answer 5

这会动态调整行高

$(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));
}

Answer 6

嗯，我想我有点晚了，你可以看到修复第二张桌子高度的按钮，这里：

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

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

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

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

box-sizing:        border-box;

这是一个强大的解决方案，它将匹配表id指定的2个表的所有行高。 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/

Answer 7

    $('#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/

两个独立桌子上的Td高度

7 个答案: