Wysokość Td na dwóch oddzielnych tabelach

Question

Mam dwie osobne tabele, na których używam funkcji focus + hover na każdym tr, która działa świetnie na obu stołach jednocześnie, mój problem dotyczy wysokości td, ponieważ jeśli opis td z pierwszej pięści jest większy będzie wyświetlany na dwóch rzędach w tym samym td, a wysokość td zostanie zmieniona, ale tylko na pierwszą tabelę td. Jak można zapamiętać wysokość do td z pierwszej tabeli i dodać ją na td z drugiej tabeli, aby mieć zarówno td ten sam rozmiar. W moim przykładzie wyświetlane są tylko pierwsze dwie wartości tr, pozostałe dwie są wyświetlane niepoprawnie z powodu opisu pierwszej tabeli td.

skrzypce przykład: http://jsfiddle.net/Ksb2W/45/

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

http://mainpage.ueuo.com/

Dziękuję.

Answer 1

Jeśli zrozumiałem cię poprawnie, chcesz, aby wysokość w każdym rzędzie obu tabel była równa mi?

Jeśli tak, to powinno działać:

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

Oczywiście stosowanie :first i :last selektorów nie jest idealny, należy zmienić te być id selektorów.

Example fiddle

---

UPDATE

Rozwiązaniem problemu Wspominałeś w swojej dobroci jest ze względu na granicy na td elementy nie są rozliczane.

Wymień height() z outerHeight() podczas sprawdzania bieżącego wiersza i powinno działać prawidłowo:

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

Answer 2

Uzyskaj maksymalną wysokość wszystkich tr elementów, a następnie ustawić wysokość wszystkich tr s do tej wysokości:

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

(myślę, że może mam mis-rozumieć swoje pytanie ... to ustawi wysokość wszystkich tr s na tę samą wysokość)

Answer 3

Aby zrobić to, co chcesz, możesz mieć tylko jedną tabelę z pustej kolumnie bez granicy dwóch części. W ten sposób wysokość komórki będzie nadal dynamiczna w oparciu o zawartość, ale będzie również zużywać wszystkie komórki w rzędzie po obu stronach stołu.

Answer 4

Dodaj kilka identyfikatorów na stołach i dodać ten kawałek kodu:

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

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

Tu pracuje jsFiddle: http://jsfiddle.net/Ksb2W/51/

Answer 5

będzie zmiana rozmiaru wysokości wiersza w locie

$(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

Dobrze Chyba jestem trochę spóźniony, widać przycisk, który ustala wysokość drugiego stołu, tutaj:

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

Możesz umieścić ten wiersz kodu w document.ready funkcji i powinno załatwić sprawę:

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

Ważne jest również, aby zmodyfikować CSS dla <td> elementów z tej właściwości:

box-sizing:  border-box; 

tutaj to rozwiązanie, że będzie pasować do wszystkich wysokości rzędu z tabel 2 określonych w tabeli id. 4 linie w funkcji document.ready, nie ma potrzeby, aby bezpośrednio zmieniać 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')); 
}); 

Zobacz skrzypce tutaj: 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()); 
}); 

Dodając do tego ryba zmienia rozmiar każdego wiersza, jeśli jej odpowiadający jest większa. W tym przypadku musisz podać identyfikatory tabel. Podobnie jak w tym skrzypcach: http://jsfiddle.net/Ksb2W/88/