Javascript jquery一个表从另一个表继承高度

我有两张桌子，有相同数量的tr。它们都是动态加载的，我无法合并它们。下面是它们的外观，例如：

第一个表的内容是从数据库加载的，有时用户可以在td中输入3或4行文本（这就是为什么我不能声明table/tr/td height）。第二个表的内容始终相同（始终有一行文本）

是否有可能（使用javascript/jquery），表2以某种方式从表1继承表行高度（如果用户输入更长的文本），并像下面这样完全对齐：

我尝试这样做，但我完全不知道如何检查元素的高度，而不首先在css中声明它：

var tableH = $("#table1 tr").height();
$("#table2 tr").css("min-height", tableH);

---

像这样的怎么样：

$('#table2 td').each(function () {
  $(this).height($($('#table1 td')[$(this).index()]).height());
});

（未经测试）

这一点非常接近

var itemNum = 0;

$("#table1 tr").each(function() {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
  itemNum++;
});

编辑

将+1添加到itemNum<代码>第n个子项基于1。似乎对你的小提琴有用

编辑2

根据thirdender的建议，这可以简化为

$("#table1 tr").each(function(itemNum) {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
});

---

我很好奇为什么你要用TR来做这件事，并试图获得行高

根据您用来获取数据的技术，将有一些很好的方法来组合数据。它是JSON吗

也许可以将其构建为流体行，并在添加记录时使用跨距使其保持对齐

此外，它还可以防止在添加数据时丢失对齐

我导入了bootstrap.css来实现这一点

<div class="row-fluid rowBorder">
  <div class="span4">Subject</div>
  <div class="span2">Hour</div>
  <div class="span4">Users</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Monday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">English English English english english english</div>
  <div class="span2">3pm</div>
  <div class="span4">User1</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Espanol</div>
  <div class="span2">4pm</div>
  <div class="span4">User2</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Tuesday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Italian</div>
  <div class="span2">1pm</div>
  <div class="span4">User3</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">French</div>
  <div class="span2">2pm</div>
  <div class="span4">User4</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Wednesday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Japanese</div>
  <div class="span2">10pm</div>
  <div class="span4">User5</div>
</div>

主题
时辰
使用者
星期一
英语英语
下午三点
用户1
埃斯帕诺
下午4点
用户2
星期二
意大利人
下午1点
用户3
法语
下午2点
用户4
星期三
日本人
晚上10点
用户5

从语义上讲，合并表是有意义的。下面是一些快速代码，可以做到这一点：

jQuery(function($) {
  var table2Rows = $("#table2 tr");
  $("#table1 tr").each(function(i) {
    table2Rows.eq(i).contents().appendTo(this);
  });
});

如果您使用jQuery或服务器端代码生成表，那么在以后（如果可能）而不是以后（使用此代码）进行合并是有意义的

另外，我注意到第二个表中的一些单元格是空的……我更新了代码，使第一个表中的单元格拉伸（增加

colspan

）以填充该空白：

---

此外，我认为，从语义上讲，将每天的活动作为一个单独的主体更有意义：：-p

从语义上讲，将两个表中的单元格合并到一个表中的同一行中有意义吗？在fiddle中，空行是在HTML中创建的，与jQuery.Mooseman不同，它们是通过jQuery和FelipaAls创建的，只是用于用户查看。对齐的表看起来更美观，两个表中的行数是否相同？@Peeyush Kushwaha是的，它们总是相同的。我说过，表是动态加载的，我不能将它们更改为DIV。您使用什么动态加载它们？还有，@zmanc，为什么bootstrap.css/

DIV

s而不仅仅是

表

？这给我的印象是：“文本、预格式化文本、图像、链接、表单、表单字段、其他表格等”。@thirdender，我建议使用div而不是表格，因为每个流体行可以作为单独的对象动态创建，并且使用跨度宽度可以使所有内容轻松对齐。作为一个流动的行，他不必担心列以不同的速率缩放会导致错误对齐.each（function（）{改为

.each（function（itemNum）{

。@thirdender:太好了！谢谢。看起来我以前可能已经用过了，但已经忘记了。