HTML - есть ли правильный элемент контейнера для размещения вокруг строк таблицы?

У меня есть таблица HTML, в которую я хотел бы добавлять или удалять строки динамически, используя поле выбора с некоторыми базовыми javascript.

Я добавляю не отдельные строки, а группу одинаковых строк одновременно. Например, если у меня уже был один набор, а затем добавился другой, результат будет выглядеть так: 

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

Чтобы добавить строки, я использую метод clone jQuery, поэтому мне нужен какой-то контейнерный элемент, чтобы обойти группу строк, однако все, что я пробовал (span, div и т. д.) привел к недопустимому HTML и не функционировал правильно.

Единственный способ, которым мне удалось заставить его работать, - это иметь каждый набор в виде отдельной таблицы, но это не совсем тот эффект, который я хочу. Есть ли что-нибудь, что я могу сделать, чтобы обойти это?
4 5
html html-table

4 ответа:

Может использовать tbody. Вы пробовали это сделать?

4

<tbody> это бирка, которую вы ищете.

(и если ваши <th>являются заголовками для их группы строк таблицы, вы также можете использовать атрибут scope, чтобы указать это: <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>
Обратите внимание, однако, что в таблице вы должны либо поместить все <tr> s в элемент <tbody> (или <thead> или <tfoot>), либо ни один из них.

То есть это действительно: 

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

Но это не так: 

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

Элемент tbody

0

Вы можете попробовать тег <tbody>

0