Question

我有两张桌子，有相同数量的tr。它们都是动态加载的，我无法合并它们。以下是它们的样子：LINK

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

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

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

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

Answer 1

这非常接近

var itemNum = 0;

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

修改

为itemNum添加了+1。 nth-child基于1。似乎在你的小提琴上工作

编辑2

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

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

Answer 2

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

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

<强> Demo

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

另外，我注意到第二个表中的一些单元格是空的...我更新了代码以使第一个表格中的单元格伸展（增加colspan）以填充该空白区域：see updated jsFiddle

另外，我认为从语义上讲，让每一天的活动成为一个单独的TBODY会更有意义：see even more updated jsFiddle： - p

Answer 3

这样的事情怎么样：

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

（未测试的）

Answer 4

我很好奇你为什么用TR做这个并尝试获得行高。

根据您用于获取数据的技术，将有一些很好的方法来组合数据。它是否以JSON形式出现？

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

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

http://jsfiddle.net/4pdCq/7/

我导入了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>

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

4 个答案: