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

时间:2015-01-26 20:14:41

标签: javascript jquery html css

html页面上有几对<table>

每对表都有相同的行数。

每对的第一个表都有类class1

每对中的第二个表都有class2类。

问题是:每个单元格在两个表格中都应具有相同的高度。 如何使用jQuery创建它?

我正在考虑使用.eacheq或两者的组合:

$('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或其他分类(但我不想因某种原因这样做)。

有什么建议吗? 附:另外我相信,如果$('table.class1 tr').each() class1而非class2,则表格中的行顺序相同(在控制台中检查)。

如果任何表格中的单元格高度可变,则可以。唯一的要求是每对的第一行高度相等,第二行的高度相等,等等。

谢谢。

1 个答案:

答案 0 :(得分:2)

你可以这样做:

&#13;
&#13;
$('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());
  }
});
&#13;
<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>
&#13;
&#13;
&#13;