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">
<th>something else</th>


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:

$(‘<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. 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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.