1

2つのテーブルが並んでいますが、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>

基本的に、table1のRow1はtable2のRow1と同じである必要があり、row2 = row2、row3=row3などです。table1はtable2の高さに従います

私のコードはここにありますhttp://jsfiddle.net/Q4tLX/8/

4

2 に答える 2

0

インデックスを使用して、ループを使用して最初のテーブル行を解析します。

各行について、セルの高さを確認します。2番目のテーブルの同じ行インデックスからのセルの高さと比較します。

最初のセルの高さ>2番目のセルの高さの場合、2番目のセルの高さを最初のセルの高さに設定します。およびその逆。

于 2013-02-05T10:22:19.343 に答える
0

これを試して：

$('#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-05T10:24:06.347 に答える