jQuery fix for tables lacking a thead

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:

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

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:

$(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');
	}
);

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.

5 thoughts on “jQuery fix for tables lacking a thead

  1. Kevin

    Thanks so much! Very helpful. I had this exact same problem and will now be able to write a GreaseMoney script or a chrome extension to make the table on a page I don’t control sortable.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *