javascript - 将一个表格列表中的单元格高度分配给另一个列表

Question

有几对<table>位于 html 页面上。

每对表具有相同的行数。

每对的第一个表的类别为 class1 。

每对的第二个表的类别为 class2 .

问题是:两个表中每个单元格的高度应相同。 如何用 jQuery 实现它？

我正在考虑使用 .each或eq或两者的组合，例如:

$('table.class2 tr').each(function(i){
      ????? = $(this).height();//suppose height of cells in class2 is bigger or the same so we shouldn't care about finding max value and assigning to the `tr` with smaller height
});

作为一个选项，id可能会分配 s 或其他类(但是由于某种原因我不想这样做)。

有什么建议吗？ 附:我也相信如果我这样做$('table.class1 tr').each()与 class1 ，不是class2 ，表中的行顺序将是相同的(在控制台中检查)。

如果任何表格中的单元格高度可变，都可以。唯一的要求是每对第一行的高度相等，第二行的高度相等，依此类推。

谢谢。

Answer 1

你可以这样做:

$('table.class2 tr').each(function(i){
  var $table1Elem = $('table.class1 tr').eq(i);
  if($table1Elem.height()>$(this).height()){
    $(this).height($table1Elem.height());     
  }else{
    $('table.class1 tr').eq(i).css('height',$(this).height());
  }
});

<div style="float:left; width:49%;">
                <table class="class1">
                    <tr><td>text 1</td></tr>
                    <tr><td>text<br><br>2</td></tr>
                    <tr><td>text 3</td></tr>        
                </table>
            </div>
            <div style="float:left; width:49%;">
                <table class="class2">
                    <tr><td>text 1</td></tr>
                    <tr><td>text 2</td></tr>
                    <tr><td>text <br><br>3</td></tr>        
                </table>
            </div>