Объединение строк в Javascript

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).Что-то вроде:

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

Необходимо перебрать всю таблицу.Каким-то образом он должен сохранять данные HTML внутри, поскольку все «а» имеют опции.

Надеюсь, это имеет смысл ...

Любая помощь будет принята с благодарностью, так как я 'м в недоумении.Я, в лучшем случае, новичок в javascript и пробираюсь через методы DOM и TOM.

Заранее большое спасибо за любую помощь или успех.

[EDIT] Для пояснения,таблица уже создана из сторонней базы данных, я редактирую ее после ее создания.Я предполагаю, что это проясняет, почему это должен быть javascript, чтобы сделать это через DOM.

Answer 1

Как уже упоминалось в другом ответе , вы не можете добавлять 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 .

Answer 2

без 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>

Пример @ jsFiddle

Но: зачем вам эта группировка? Если единственным преимуществом является видимая группировка, я бы предпочел сделать это, установив границы ячеек.
Дайте всем клеткам границу и четным border-top:none / нечетным a border-bottom: none

Answer 3

Вставить другую таблицу:

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

Или, если вы хотите сделать это через Javascript, вы можете дать родителю <td> идентификатор и установить его 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>";