Included THEAD And TBODY On This Table

Question

I have the following table that is generated from Sharepoint: &l

Solution 1:

It seems like all modern browsers automatically wrap the contents of a table in a <tbody> if you happen to omit the tag, so you'd have to do something like this:

$('table').each(function() {
    var $this = $(this);

    $this.children('tbody').children().unwrap();
    $this.children('tr:has(th)').wrapAll('<thead>');
    $this.children('tr:has(td)').wrapAll('<tbody>');
});

Test it with older browsers if you want. It seems like it'd work.

Solution 2:

Step 1: Store the header row temporarily

First you need to isolate the header and body rows from the DOM, before we rearrange the table's internal layout.

We'll do this using jQuery's contextual selector, which you may have seen before. It works by selecting elements within a context you specify: if that context is a DOM node - the table, in this case - it selects elements within that DOM node.

Note: I use the $ prefix in JavaScript variable names to indicate variables that I'm using to store a jQuery object - which is all of the variables in this exercise. It's a personal convention that you don't have to use yourself.

var $table = $('#your-table-id');

// This gets the first <tr> within the table, and remembers it here.
var $headRow = $('tr', $table).first();
$headRow.remove();

Step 2: Create the tbody, if necessary

At this point, our work is either easier or harder. Some browsers, like Firefox, will already have interpreted the the table as having an implicit <tbody> element in which all the other rows have already been stored - if that's the case, our job is already done! Otherwise, we have a bit more work to do and need to create that <tbody> to store the current rows (all of which are not the header row).

if (!$table.has('tbody')) {
    var $otherRows = $('tr', $table);
    $otherRows.remove();

    var $tbody = $('<tbody>');
    $table.append($tbody);
    $tbody.append($otherRows);
}

Step 3: Create the thead

Now we'll insert the thead element at the start of the table, and add our table's header row to it.

var $thead = $('<thead>');
$table.prepend($thead);
$thead.append($headRow);

Now all is well.

The code in action, and minus my comments

First: JSFiddle demo

And now the code without my talking breaking it up:

var $table = $('#your-table-id');

// This gets the first <tr> within the table, and remembers it here.
var $headRow = $('tr', $table).first();
$headRow.remove();

if (!$table.has('tbody')) {
    var $otherRows = $('tr', $table);
    $otherRows.remove();

    var $tbody = $('<tbody>');
    $table.append($tbody);
    $tbody.append($otherRows);
}

var $thead = $('<thead>');
$table.prepend($thead);
$thead.append($headRow);

An iterative alternative

This will cover each table with the ms-listviewtable class in the document, rather than targeting exactly one table by ID.

$('table.ms-listviewtable').each(function() {

    var $table = $(this);

    // The rest of the code as above goes within the function here,
    // except, of course, for the line that sets the $table variable.

});

Solution 3:

Hi All thanks for everyones contribution to this question. I have managed to get it to work and the throw the tablesorter method around the table.

This is a solution if you ever need to make tablesorter work without the generated table have a THEAD or TBODY tags:

$(document).ready(function() {

    var $table = $('#ctl00_m_g_fb789c4e_7fc7_47b5_9be4_dfa65d4650e0_ctl00_resultsGrid');

    // This gets the first <tr> within the table, and remembers it here.
    var $headRow = $('tr', $table).first();
    $headRow.remove();

    if (!$table.has('tbody')) {
        var $otherRows = $('tr', $table);
        $otherRows.remove();

        var $tbody = $('<tbody>');
        $table.append($tbody);
        $tbody.append($otherRows);
    }

    var $thead = $('<thead>');
    $table.prepend($thead);
    $thead.append($headRow);

    $("#ctl00_m_g_fb789c4e_7fc7_47b5_9be4_dfa65d4650e0_ctl00_resultsGrid").tablesorter();
});

Html5 Academy