Combiner des lignes en Javascript

Question

Je cherche de l'aide sur l'angle Javascript de ce problème. J'ai une table qui va comme ...

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

Il y a en fait plus de 20 lignes et la ligne A, mais ce que je ne pensais pas que je veux les copier.

J'ai fondamentalement besoin d'ajouter une rangée de conteneurs (une rangée) autour de chaque rangée (# et #a). Quelque chose comme:

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

Il doit faire défiler la table entière. D'une certaine manière, il doit conserver les données HTML à l'intérieur puisque tous les «a» ont des options.

J'espère que cela a du sens ...

Toute aide serait grandement apprécié, comme je suis à une perte. Je suis novice dans le meilleur des cas au javascript et je me bats dans les méthodes DOM et TOM.

Merci beaucoup d'avance pour toute aide ou progrès.

[EDIT] Pour plus de clarté, la table est déjà construite à partir d'une base de données tierce, je l'édite après sa construction. Je suppose que cela clarifie pourquoi il devrait être javascript à faire à travers le DOM.

Answer 1

Intégrer une autre table:

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

Ou si vous êtes désireux de le faire via Javascript, vous pouvez donner le parent <td> un identifiant et mettez-est 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

Comme mentionné dans another answer vous ne pouvez pas ajouter tr éléments directement dans td comme vous essayez.
Vous devez d'abord créer une table intérieure .

Si vous utilisez jQuery vous feriez quelque chose comme ceci:

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

Voir cette live jsFiddle example.

Answer 3

sans jQuery il peut ressembler à ça:

<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

Mais: pourquoi avez-vous besoin de ce groupe? Si le seul avantage est un regroupement visible, je préférerais le faire en définissant les limites des cellules.
Donner toutes les cellules une bordure et à la même border-top:none/à l'étrange un border-bottom: none