두 개의 테이블의 열 높이

두 테이블을 나란히 놓고 두 테이블의 열 높이를 jQuery를 사용하여 동일하게 만드는 방법은 무엇입니까? 둘 다 같은 양의 행을가집니다. 테이블의 내용은 동적으로 작성됩니다. 높이가 다를 수 있습니다.두 개의 테이블의 열 높이

<div class="row"> 
    <div class="span2 pull-left"> 
    <table class="table table-bordered pull-left" id="compare-tbl-1" border="1"> 
     <thead> 
     <th>Column 1</th> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Row1</td> 
     </tr> 
     <tr> 
      <td>Row2</td> 
     </tr> 
     <tr> 
      <td>Row3</td> 
     </tr> 
     <tr> 
      <td>Row4</td> 
     </tr> 
     <tr> 
      <td>Row5</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    <div class="span10 pull-right"> 
    <table class="table table-bordered" id="compare-tbl-2"> 
     <thead> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
      <th>Column 4</th> 
      <th>Column 5</th> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Row1 Column1</td> 
      <td>Row1 Column2</td> 
      <td>Row1 Column3</td> 
      <td>Row1 Column4</td> 
      <td>Row1 Column5</td> 
     </tr> 
     <tr> 
      <td>Row2 Column1</td> 
      <td>Row2 Column2</td> 
      <td>Row2 Column3</td> 
      <td>Row2 Column4</td> 
      <td>Row2 Column5</td> 
     </tr> 
     <tr> 
      <td>Row3 Column1</td> 
      <td>Row3 Column2</td> 
      <td>Row3 Column3</td> 
      <td>Row3 Column4</td> 
      <td>Row3 Column5</td> 
     </tr> 
     <tr> 
      <td>Row4 Column1</td> 
      <td>Row4 Column2</td> 
      <td>Row4 Column3</td> 
      <td>Row4 Column4</td> 
      <td>Row4 Column5</td> 
     </tr> 
     <tr> 
      <td>Row5 Column1</td> 
      <td>Row5 Column2</td> 
      <td>Row5 Column3</td> 
      <td>Row5 Column4</td> 
      <td>Row5 Column5</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div>

기본적으로, 표 1은 표 2에 ROW1, ROW2 = ROW2, row3 = row3 등등에 ROW1와 동일해야한다. 표 1은

내 코드는 여기 http://jsfiddle.net/Q4tLX/8/

출처

2013-02-05 da-hype

이 시도 :

$('#compare-tbl-1 tr').each(function(){ 
    var i = $('#compare-tbl-1 tr').index($(this)); 
    if($(this).outerHeight() > $('#compare-tbl-2 tr:eq('+i+')')){ 
     $('#compare-tbl-2 tr:eq('+i+') td').css('height',$(this).outerHeight()); 
    } else { 
     $(this).children().css('height',$('#compare-tbl-2 tr:eq('+i+')').outerHeight()); 
    } 
});

데모 - 어떤 이유로 온통 표 크기 증가 http://jsfiddle.net/PVZw7/

출처

2013-02-05 10:24:06 boz

. 그리고 table2의 나는 그 이상의 연산자를 교환하려고했지만 실패했습니다. –

내 코드가 작동하는지 테스트하기 위해 table2의 셀 중 하나에 내용을 추가했습니다. http://jsfiddle.net/PVZw7/1/에서 살펴보십시오. – boz

이다 지수, 루프와 첫 번째 테이블 행을 구문 분석 표 2의 높이를 다음과 같습니다.

각 행에 대해 셀 높이를 확인하십시오. 두 번째 테이블의 동일한 행 인덱스에서 셀의 높이와 비교하십시오.

첫 번째 셀 높이> 두 번째 셀 높이 인 경우 두 번째 셀 높이를 첫 번째 셀 높이로 설정하십시오. 그 반대.

출처

2013-02-05 10:22:19 ByScripts

두 개의 테이블의 열 높이

답변

관련 문제