Question

我正在寻找关于此问题的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>

实际上更像是20行和行a，但我认为我不想将它们全部复制。

我基本上需要在每两行（＃和#a）周围添加一个容器行（单行）。类似的东西：

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

它需要遍历整个表格。不知何故，它必须保留HTML数据，因为所有“a”都有选项。

我希望这是有道理的......

任何帮助都会非常感激，因为我不知所措。我是javascript的新手，我正在努力通过DOM和TOM方法。

非常感谢您提供任何帮助或进展。

[编辑]为了澄清，该表已经从第三方数据库构建，我在构建之后对其进行编辑。我想这澄清了为什么必须通过DOM完成javascript。

Answer 1

嵌入另一张桌子：

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

或者如果你想通过Javascript这样做，你可以给父<td>一个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>";

Answer 2

正如another answer中所述，您无法直接在tr中添加td元素，就像您正在尝试一样。
您首先要创建一个内部表。

如果你使用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);
});

请参阅此live jsFiddle example。

Answer 3

没有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>

Example@jsFiddle

但是：你为什么需要这个分组？如果唯一的好处是可见分组，我宁愿通过设置单元格的边框来做到这一点为所有单元格设置边框，并为border-top:none /奇数a border-bottom: none

提供偶数

在Javascript中组合行

3 个答案: