2表，需要爲每個匹配行設置最大高度的行

我有2個html表，我需要每行有相同的高度。2表，需要爲每個匹配行設置最大高度的行

所以，如果表＃1的第3排有25的高度，那麼表＃2的第3行應該有25

無論匹配行具有最大高度的高度，然後兩行應具有相同的高度。

我怎樣才能做到這一點？

我知道如何遍歷像行：

$("table1 tr").each(function() { 

}); 

$("table2 tr").each(function() { 

});

來源

2012-08-28 loyalflow

它是1對1的行數嗎？也就是說，表1和表2總是有相同的行數？ – Shmiddty

這裏有一個類似的問題，我之前去過：http://stackoverflow.com/questions/10351628/td-height-on-two-separate-tables/10351721#10351721不同的是，將設置兩個表的所有行的高度，不只是最高的。 –

@Shmiddty是相同的行數。 – loyalflow

你可以做這樣的事情（假設兩個表具有行等量）：

//for each row in table one 
$("#table1 tr").each(function(index, element){ 

    //get row height from table1 and the corresponding row in table two 
    var rowOneHeight = $(this).height(); 
    var rowTwo = $("#table2 tr:eq(" + index + ")"); 

    //if no matching row was found in table two, stop loop 
    if(!rowTwo.length) return false; 

    var rowTwoHeight = rowTwo.height(); 

    //compare row heights, and set the least high row to the height of the highest one 
    if(rowOneHeight > rowTwoHeight){ 
     //set rowTwoHeight to rowOneHeight 
     rowTwo.height(rowOneHeight); 
    }else{ 
     $(this).height(rowTwoHeight); 
    } 
});

來源

2012-08-28 16:07:36 Asciiom

爲什麼不只是使用'.each（）'函數作爲參數傳遞的索引和元素。 '.each（function（index，Element））' –

你是對的，那樣更乾淨，我會更新。謝謝！ – Asciiom

您也可以檢查每個循環之前的行數，以查看哪個更多。（雖然在技術上你只需要循環少一個，所以我不知道這是必要的） – Shmiddty

你可以看到一個例子這裏。 http://jsfiddle.net/anAgent/ZcnEp/

設置高度時，您需要考慮行的邊框，因爲它會影響高度。我的例子並不包含這一小段代碼，但如果你設置邊界，它可能是你需要考慮的事情。

$(document).ready(function() { 
     var $table1 = $("#Table1"); 
     var $table2 = $("#Table2"); 
     $.each($table1.find("tr"), function(i, o) { 
      var $t1r = $(o); 
      var $t2r = $table2.find('tr').eq(i); 
      if ($t2r != undefined) { 
       $t1r.height($t1r.height() > $t2r.height() ? $t1r.height() : $t2r.height()); 
       $t2r.height($t1r.height()); 
       console.log("t1:r%s | t2:r%s", $t1r.height(), $t2r.height()); 
      } else { 
       return false; 
      } 
     }); 
    });

來源

2012-08-28 16:35:21 anAgent

2表，需要爲每個匹配行設置最大高度的行

回答

相關問題