Question

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 am not adding single rows, but a group of similar rows at the same time. For example, if I already had one set, then added another, the result would like 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 the rows, I am using jQuery’s clone method, so I need some sort of container element to go around the group of rows, however, everything I have tried (span, div, etc) has led to invalid HTML and not functioned correctly.

The only way I have managed to get it working is to have each set as a separate table, but this isn’t really the effect I want.

Is there anything I can do to get around this?

Answer 1

Could use tbody. Have you tried that?