Sort a HTML Table with more than one tbody inside (each with col-&rowspan)

Question

Hello Developers,

I've got a question:

Now i have a html file with some content like this:

<table>
<thead>
...
</thead>
<tbody>
    <tr>
        <td rowspan="2">demo</td>
        <td rowspan="2">demo</td>
        <td">demo</td>
        <td>demo</td>
    </tr>
    <tr>
        <td>demo</td>
        <td>demo</td>
    </tr>
</tbody>

<tbody>
    <tr>
        <td rowspan="2">demo</td>
        <td rowspan="2">demo</td>
        <td">demo</td>
        <td>demo</td>
    </tr>
    <tr>
        <td>demo</td>
        <td>demo</td>
    </tr>
</tbody>

</table>

With jQuery I'm using :odd and :even to style the groups with different colors, my Problem is now: I will Sort the Tbody and not the TRs, because this will cause a error (will not look good)

http://tablesorter.com/docs/ This was my first try, but this only works with TR, because of that I've changed tbody with TR, but now I cant use :odd and :even and also the sorter is not running, because there are TR in TR, I dont know why but nothing happens.

Is there a way to group two or more TRs like tbody but where can I also use a Tablesorter?

Answer 1

<tr> inside of another <tr> doesn't seem like proper html to me. Likewise, having two <tbody> seems improper. Assuming you need to have table structure in your table rows, I think your best bet will be to use embedded tables like this:

<table>
  <thead>
  ...
  </thead>
  <tbody>
    <tr>
      <table>
      ...
      <table>
    </tr>
    <tr>
      <table>
      ...
      <table>
    </tr>
  </tbody>
</table>