Question

我有两个并排的表，如何使用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/

Answer 1

使用带索引的循环解析第一个表行。

对于每一行，请查看单元格的高度。将它与第二个表的相同行索引的单元格高度进行比较。

如果第一个细胞高度>第二个单元格高度，然后将第二个单元格高度设置为第一个单元格的高度。反之亦然。

Answer 2

试试这个：

$('#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/

两个表的列高

2 个答案: