HTML - Czy istnieje prawidłowy element pojemnika do rozmieszczenia w rzędach tabeli?

Question

Mam tabelę HTML, do którego chciałbym dynamicznie dodawać lub usuwać wiersze, przy użyciu pola wyboru z niektórych podstawowych javascript.

Nie dodaję pojedynczych wierszy, ale grupę podobnych wierszy w tym samym czasie. Na przykład, jeśli już miałem jeden zestaw, a następnie dodaje inny wynik chciałby tak:

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

Aby dodać wiersze, używam metody klonowania jQuery, więc muszę jakiegoś elementu pojemnika, aby przejść wokół grupy wierszy wszystko, co wypróbowałem (span, div, itp.) doprowadziło do nieprawidłowego kodu HTML i nie działało poprawnie.

Jedynym sposobem, w jaki udało mi się to sprawić, jest ustawienie każdego zestawu jako osobnej tabeli, ale nie jest to efekt, którego pragnę.

Czy jest coś, co mogę zrobić, aby to obejść?

Answer 1

Przydałoby tbody. Czy próbowałeś tego?

Answer 2

<tbody> jest tagiem, którego szukasz.

(A jeśli <th> s są pozycje dla ich grupy wierszy tabeli, można również użyć atrybutu scope do wskazania tego. <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> 

Należy jednak pamiętać, że w tabeli, musisz albo wstaw wszystkie elementy <tr> s do elementu <tbody> (lub <thead> lub <tfoot>) lub żadnego z nich.

tj. to jest ważne:

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

Ale to nie jest:

<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

tbody element

Answer 4

Można spróbować tag <tbody>