Every web developer that’s ever had to use jQuery knows just how much time it can save, and just how quickly it can fix a lot of problems. I recently had a case where I wanted to implement the jQuery Tablesorter plugin into a site that had a badly constructed table that I couldn’t change its construction. Tablesorter requires a table to be setup similar to:

[html]
<table id="tablesorter">
<thead>
<tr>
<th>name</th>
<th>something</th>
<th>something else</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>red</td>
<td>blue</td>
</tr>
…
</tbody>
</table>[/html]

The table I was working with lacked a thead and instead used the first tr as the head. It also added some styling classes for zebra striping that I wanted to get rid of so that tablesorter could add its zebra striping. Using jQuery, I was able to fix this up in just a few short lines:

[javascript]
$(document).ready(function()
{
$(‘table.example’).prepend(
$(‘<thead></thead>’).append($(‘.example tr:first’).remove())
);
$(‘table.example > tbody > tr’).removeClass(‘odd’);
$(‘table.example > tbody > tr’).removeClass(‘xx’);
}
);
[/javascript]

Line 1 starts jQuery. Line 2 selects our table and tells it to we are going to add something to the beginning of it. Line 3 takes the first tr, adds it to a new thead and removes it from the body. Lines 5 and 6 then remove the classes we aren’t going to use.

If you want to see this fix in action, take a look at a live demo. I hope this fix helps you out if you ever need to a jquery fix for a table with no thead. Let me know if you use it.