-3

我有两张桌子：

<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与English, User1->处于同一行Spanish。 .. 等等。

注意：如果你问为什么这些表看起来像这样，那是因为它们是从另一个页面动态加载的，我只能使用 jquery/javascript 将一些 id 属性设置为 td、tr 或表等。准备粘贴到JSFiddle中的示例

编辑：我想在表二中插入空白行，这样它们看起来都一样。这是我想要实现的结果的链接LINK

4

1 回答 1

1

演示

我明白了，你有两张并排的桌子，右手一张需要有空隙来清除“头”行

// 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)+')');
    }
});​

这不是显示表格结果的好方法，因为它们很容易错位。正确的方法是将两者结合起来，最好是在它们存在于浏览器之前。但是，您已经说过您不能在浏览器上执行此操作，因为它们是动态加载的，但就个人而言，我仍然坚持能够识别每个数据项属于哪一行并将整个事情变成一个表格。

于 2013-01-04T20:58:20.540 回答