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

Question

У меня есть таблица 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>

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

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

Могу ли я что-нибудь сделать, чтобы обойти это?

Answer 1

<tbody> - это тег, который вы ищете.

(И если ваши <th> s являются заголовками для их группы строк таблицы, вы также можете использовать *Атрибут 1007 * для указания этого: <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> в <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>

Answer 2

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

Answer 3

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

Answer 4

Элемент tbody