1

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

尝试这个：

$('#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 回答
0

使用循环解析第一个表行，并带有索引。

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

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

于 2013-02-05T10:22:19.343 回答