在Javascript中组合行

我正在寻找一些关于这个问题的Javascript方面的帮助。我有一张桌子，看起来像

<table>
 <tbody>
  <tr> (Row 1)
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr> (Row 1a)
   <td>
    <select option>
   </td>
  </tr>
  <tr> (Row 2)
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr> (Row 2a)
   <td>
    <select option>
   </td>
  </tr>
  <tr>
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr>
   <td>
    <select option>
   </td>
  </tr>
 <tbody>
</table>

（第1行）
这说明了什么

（第1a行）
（第2行）
这说明了什么

（第2a行）
这说明了什么

实际上有20行和a行，但我不认为我想把它们全部复制下来

我基本上需要在每两行（#和#a）周围添加一个容器行（一行）。比如：

<tr> (Container Row 1)
 <td>
  +<tr> (Row 1)
  +<tr> (Row 1a)
 </td>
</tr>

（容器第1行）
+（第1行）
+（第1a行）

它需要在整个桌子上循环。不知何故，它必须将HTML数据保留在内部，因为所有的“a”都有选项

我希望这是有意义的

任何帮助都将不胜感激，因为我不知所措。我对javascript充其量只是个新手，在DOM和TOM方法中苦苦挣扎

提前非常感谢您的帮助或进展

[编辑]为了澄清，该表已经由第三方数据库构建，我正在构建后对其进行编辑。我想这说明了为什么必须使用javascript才能通过DOM完成。嵌入另一个表：

<tr> (Container Row 1)
 <td>
  <table>
    <tr><td>(Row 1a)</td></tr>
    <tr><td>(Row 1b)</td></tr>
  </table>
 </td>
</tr>

（容器第1行）
（第1a行）
（第1b行）

或者，如果您想通过Javascript实现这一点，您可以给父级

一个id，并将其设置为innerHTML

<tr> (Container Row 1)
 <td id='rowX'>
 </td>
</tr>


document.getElementById('rowX').innertHTML = "<table><tr><td>(Row 1a)</td></tr><tr><td>(Row 1b)</td></tr></table>";

（容器第1行）
document.getElementById（'rowX'）.innertHTML=“（第1a行）（第1b行）”；

如中所述，您不能像正在尝试的那样直接在

td

中添加

tr

元素。
首先创建一个内部表

如果您使用jQuery，您将执行以下操作：

//setup some click actions just to prove that they remain attached even after moving
$('#outterTable tr').click(function(){
    alert('You clicked on row: '+$(this).text());
});

//update the table (group each even row with the one after it)
$('#outterTable tr:even').each(function() {
    var $tr1 = $(this),
        $tr2 = $tr1.next('tr'),
        $t = $('<table></table>');
    $('<tr></tr>').append($t).insertBefore($tr1);
    //click actions will remain attached
    //if that is not required, than use $tr1.remove()
    $t.append($tr1).append($tr2);
});​

//设置一些单击操作，以证明即使在移动后它们仍保持连接状态
$（'#outterTable tr'）。单击（函数（）{
警报（'您单击了行：'+$（this.text（））；
});
//更新表格（将每个偶数行与其后的一行分组）
$（'#outterTable tr:even'）。每个（函数（）{
变量$tr1=$（此），
$tr2=$tr1.next（'tr'），
$t=$（''）；
$（''）.append（$t）.insertBefore（$tr1）；
//单击操作将保持附加状态
//如果不是必需的，则使用$tr1.remove（）
$t.append（$tr1）。append（$tr2）；
});​

---

请参见此图。

如果没有jQuery，它可能会如下所示：

  <script type="text/javascript">
  <!--
  function fx(table)
  {
    var tmp=document.createElement('table');
    tmp.appendChild(document.createElement('tbody'))

   while(table.rows.length)
   {
     if(table.rows.length%2==0)
     {
       var wrapper=tmp.lastChild.appendChild(document.createElement('tr'));
       wrapper.appendChild(document.createElement('td'));
       wrapper.getElementsByTagName('TD')[0].appendChild(document.createElement('table'));
       wrapper.getElementsByTagName('TD')[0].lastChild.appendChild(document.createElement('tbody'));
     }
     wrapper.getElementsByTagName('TD')[0].lastChild.lastChild.appendChild(table.getElementsByTagName('TR')[0])
   }
   table.parentNode.replaceChild(tmp,table);
   tmp.setAttribute('border',1);
 }
  window.onload=function(){fx(document.getElementsByTagName('table')[0]);}
  //-->
  </script>

但是：为什么您需要这个分组？ 如果唯一的好处是一个可见的分组，我更愿意通过设置单元格的边框来实现这一点。

---

给所有单元格一个边框，给偶数的a

边框顶部：无

/给奇数的a

边框底部：无

我知道这会满足我的需要，但我无法使用jQuery，因为我正在使用javascript include编辑.asp（我没有权限添加jQuery include）页面。有没有办法将其转换为常规javascript？或者我看到这条评论，想知道它到底是什么意思：“你可以在源文件中预先添加一个缩小的verison。”谢谢你，我会尽快实现它，看看它是否有效。至于分组的原因，每个#行都是标题，每个#行都是选择选项，但我必须对每个组合行集应用背景图像。