HTML - Esiste un elemento contenitore corretto da posizionare attorno alle righe della tabella?

Question

Ho una tabella HTML, a cui vorrei aggiungere o rimuovere le righe in modo dinamico, utilizzando una casella di selezione con un javascript di base.

Non sto aggiungendo singole righe, ma un gruppo di righe simili allo stesso tempo. Per esempio, se ho già avuto un set, poi aggiunto un altro, il risultato vorrebbe in questo modo:

<tr> 
<th colspan="2">Item 1</th> 
</tr> 
<tr> 
    <th>Title</th> 
    <td>X</td> 
</tr> 
<tr> 
    <th>Description</th> 
    <td>Y</td> 
</tr> 
<tr> 
<th colspan="2">Item 2</th> 
</tr> 
<tr> 
    <th>Title</th> 
    <td>A</td> 
</tr> 
<tr> 
    <th>Description</th> 
    <td>B</td> 
</tr> 

Per aggiungere le righe, io sto usando metodo clone di jQuery, quindi ho bisogno di una sorta di elemento contenitore per andare attorno al gruppo di righe, tuttavia, tutto ciò che ho provato (span, div, ecc.) ha portato a un HTML non valido e non ha funzionato correttamente.

L'unico modo in cui sono riuscito a farlo funzionare è avere ciascun set come tabella separata, ma questo non è proprio l'effetto che voglio.

C'è qualcosa che posso fare per aggirare questo?

Answer 1

Potrebbe utilizzare tbody. Hai provato?

Answer 2

<tbody> è il tag che stai cercando.

(E se i vostri <th> s sono voci, per il loro gruppo di righe della tabella, è anche possibile utilizzare l'attributo scope per indicare questo:. <th colspan="2" scope="rowgroup">)

<tbody> 
    <tr> 
    <th scope="rowgroup" colspan="2">Item 1</th> 
    </tr> 
    <tr> 
     <th scope="row">Title</th> 
     <td>X</td> 
    </tr> 
    <tr> 
     <th scope="row">Description</th> 
     <td>Y</td> 
    </tr> 
</tbody> 
<tbody> 
    <tr> 
    <th scope="rowgroup" colspan="2">Item 2</th> 
    </tr> 
    <tr> 
     <th scope="row">Title</th> 
     <td>A</td> 
    </tr> 
    <tr> 
     <th scope="row">Description</th> 
     <td>B</td> 
    </tr> 
</tbody> 

Nota però che all'interno della tabella, è necessario eseguire inserire tutti gli <tr> s in un elemento <tbody> (o <thead> o <tfoot>) o nessuno di essi.

I.e. questo è valido:

<table> 
    <!-- All <tr>s are inside <tbody>s --> 
    <tbody> 
     <tr> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
     </tr> 
    </tbody> 
    <tbody> 
     <tr> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Ma non è questo:

<table> 
    <!-- <tr>s and <tbody>s can’t be siblings. --> 
    <tr> 
     <td></td> 
    </tr> 
    <tbody> 
     <tr> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Answer 3

Il tbody element

Answer 4

Si potrebbe provare il tag <tbody>