0

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

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

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

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

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

4 回答 4

1

这非常接近

var itemNum = 0;

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

编辑

为 itemNum 添加了 +1。nth-child是从 1 开始的。似乎在你的小提琴上工作

编辑 2

根据第三方的建议，这可以简化为

$("#table1 tr").each(function(itemNum) {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
});
于 2013-01-07T16:04:45.423 回答
1

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

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

演示

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

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

此外，我认为从语义上讲，将每天的活动作为单独的 TBODY 会更有意义：请参阅更多更新的 jsFiddle :-p

于 2013-01-07T16:09:17.040 回答
0

像这样的东西怎么样：

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

（未经测试）

于 2013-01-07T16:02:50.383 回答
0

我很好奇您为什么要使用 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>
于 2013-01-07T16:07:09.607 回答