Geek Answers Handbook

HTML Is there a proper container element to place around table rows?

I have an HTML table to which I would like to add or remove rows dynamically using a select box with some basic javascript.

I do not add separate lines, but a group of identical lines at the same time. For example, if I already had one set and then added another, the result would look like this:

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

To add lines, I use the jQuery cloning method, so I need some kind of container element to get around a group of lines, however everything I tried (span, div, etc.) led to invalid HTML and did not work correctly.

The only way I could get it to work is to have each set as a separate table, but that is not the effect I want.

-, , ?

+5
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> <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>
+8

Tbody element

0
source

You can try tag <tbody>

0
source

More articles:


All Articles