-3

私は2つのテーブルを持っています：

<table width="200" id="table1" border=1 style="float:left;">
<tr><th>Subject</th><th>Hour</th></tr>
<tr class="head"><td colspan=2>MONDAY</td></tr>
<tr><td>English</td><td>3pm</td></tr>
<tr><td>Spanish</td><td>4pm</td></tr>
<tr class="head"><td colspan=2>TUESDAY</td></tr>
<tr><td>Italian</td><td>1pm</td></tr>
<tr><td>French</td><td>2pm</td></tr>
<tr class="head"><td colspan=2>WEDNESDAY</td></tr>
<tr><td>Japanese</td><td>10pm</td></tr>
</table>
<table width="200" id="table2" border=1 style="float:left;">
<tr><th>Users</th></tr>
<tr class="second"><td>User1</td></tr>
<tr class="second"><td>User2</td></tr>
<tr class="second"><td>User3</td></tr>
<tr class="second"><td>User4</td></tr>
<tr class="second"><td>User5</td></tr>
</table>​​​​​​​​​​​​​

私が達成したいのは、テーブル1のすべてのヘッドクラスに対して、テーブル2のユーザーが正しいサブジェクト（曜日名ではない）と一致するように空白のテーブル行を挿入したいので、、- >User1と同じ行になります。 .. 等々。EnglishUser1Spanish

注：これらのテーブルがこのように見える理由を尋ねる場合、それは別のページから動的に読み込まれるためです。たとえば、jquery / javascriptを使用してtd、tr、またはテーブルなどにいくつかのid属性を設定することしかできません。JSFiddleにパセットする準備ができている例

編集：両方が同じに見えるように、テーブル2に空白行を挿入したいと思います。これが私が達成したい結果とのリンクですLINK

4

1 に答える 1

1

デモ

わかりました。2 つのテーブルが隣り合っており、「先頭」の行をクリアするために右側にギャップが必要です。

// edited to cope with hidden trs in table 1
var emptytr=$('<tr><td>&nbsp;</td></tr>');
$('#table1 tr:visible').each(function(i){
    if ($(this).hasClass('head')){ 
        emptytr.clone().insertAfter('#table2 tr:eq('+(i-1)+')');
    }
});​

結果の位置がずれやすくなるため、これは表形式の結果を表示するのに適した方法ではありません。正しい方法は、できればブラウザーに存在する前に、2 つを結合することです。ただし、ブラウザでは動的にロードされるため、これを行うことはできないと言いましたが、個人的には、データの各項目がどの行に属しているかを識別し、すべてを 1 つのテーブルにすることができます。

于 2013-01-04T20:58:20.540 に答える