Td height su due tabelle separate

Question

Ho due tabelle separate su cui uso una funzione focus + hover su ogni tr che funziona perfettamente su entrambe le tabelle contemporaneamente, il mio problema è con td height perché se la descrizione di un td dalla tabella pugno è maggiore verrà visualizzato su due file nella stessa td e l'altezza di td verrà modificata ma solo nella prima tabella td. Come è possibile ricordare l'altezza del td dalla prima tabella e aggiungerla alla seconda dalla tabella per avere entrambe le stesse dimensioni. Nel mio esempio vengono visualizzati solo i primi due ma gli altri due non vengono visualizzati a causa della descrizione della prima tabella td.

esempio violino: http://jsfiddle.net/Ksb2W/45/

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

http://mainpage.ueuo.com/

Grazie.

Answer 1

Se ho capito bene, vuoi che le altezze all'interno di ciascuna riga di entrambi i tavoli siano le sam e?

Se è così, questo dovrebbe funzionare:

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

Ovviamente l'uso di :first e :last selettori non è l'ideale, si dovrebbe modificare tali per essere id selettori.

Example fiddle

---

UPDATE

La soluzione al problema che hai citato nella tua bontà è a causa del confine sulle td elementi non vengono contabilizzati.

Sostituire height() con outerHeight() quando si controlla la riga corrente e dovrebbe funzionare bene:

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

Answer 2

ottenere l'altezza massima di tutti gli tr elementi e quindi impostare l'altezza di tutte le tr s a questa altezza:

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

(Penso di avere mis-capito tua domanda ... questo imposterà l'altezza di tutti gli tr s alla stessa altezza)

Answer 3

di fare ciò che si vuole, si potrebbe avere solo una tabella con una colonna vuota senza confine fra le due parti. In questo modo, l'altezza della cella sarà comunque dinamica in base al contenuto, ma spenderà anche tutte le celle nella riga da entrambi i lati della tabella.

Answer 4

aggiungere un po 'id sui tavoli e aggiungere questo pezzo di codice:

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

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

Qui sta lavorando jsFiddle: http://jsfiddle.net/Ksb2W/51/

Answer 5

questo sarà ridimensionare l'altezza delle righe al volo

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

Bene Immagino di essere un po 'in ritardo, puoi vedere il pulsante che corregge l'altezza del secondo tavolo, qui:

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

È possibile inserire questa riga di codice nella funzione document.ready e dovrebbe fare il trucco:

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

E 'anche importante per modificare il CSS per gli elementi <td> con questa proprietà:

box-sizing:  border-box; 

Ecco una soluzione robusta che corrisponderà tutte le altezze schiera di 2 tavoli specificati da tavolo id. 4 linee in funzione document.ready, senza necessità di modificare direttamente 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')); 
}); 

Vedere il violino qui: 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()); 
}); 

Aggiungendo questo al violino ridimensiona ogni riga se il corrispondente è maggiore. In questo caso però devi dare i tuoi id tabelle. Come in questo violino: http://jsfiddle.net/Ksb2W/88/