0

同じ量の tr を持つ 2 つのテーブルがあります。それらは両方とも動的にロードされており、マージできません。たとえば、次のようになります。LINK

最初のテーブルのコンテンツはデータベースから読み込まれ、ユーザーが td に 3 ～ 4 行のテキストを入力できる場合があります (テーブル/tr/td の高さを宣言できないのはそのためです)。2 番目のテーブルの内容は常に同じです (常に 1 行のテキストがあります)

(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

thirdender の提案によると、これは次のように簡略化できます。

$("#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 またはサーバー側コードを使用してテーブルを生成している場合は、後で (このコードを使用して) ではなく、(可能であれば) その時点でマージを行うのが理にかなっています。

また、2 番目のテーブルのセルの一部が空であることにも気付きました…コードを更新して、最初のテーブルのセルを拡大 (増加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 に答える