[jQuery] [Tablesorter] Avoid extra <tr>?
A table contains one sortable entry per row. Moreover, for every entry
there is a second row directly following it, which contains more
detailed information about the entry above.
When sorting the table: the rows containing the detailed information
are sorted as well and are, logically, no longer positioned underneath
the entry.
The detailed information needs to remain coupled to the entries when
these are sorted... how to approach this? I guess the answer is
somewhere in the html. Containing the detailed information in the
entry's <tr> would solve the issue... Do not know how to dot that...
my code
<table class="tablesorter " cellpadding="2">
<thead>
<tr>
<th>naam</th><th>tel</th>
</tr>
</thead>
<tbody>
{% for bedrijf in object_list %}
<tr>
<td>{{ bedrijf.naam }}</td>
<td>{{ bedrijf.tel }}</td>
</tr>
<tr>
<td colspan="3"><table>
<tr><th></th><th>adres</th><th>postcode</th><th>plaats</th></
tr>
<tr>
<td>postadres:</td>
<td>{{ bedrijf.adres_post }}</td>
<td>{{ bedrijf.postcode_post }}</td>
<td>{{ bedrijf.plaats_post }}</td>
</tr>
<tr>
<td>bezoekadres:</td>
<td>{{ bedrijf.adres_bezoek }}</td>
<td>{{ bedrijf.postcode_bezoek }}</td>
<td>{{ bedrijf.plaats_bezoek }}</td>
</tr>
</table></td>
</tr>
</tr>
{% endfor %}
</tbody>
</table>