Included THEAD and TBODY on this table

Question

I have the following table that is generated from Sharepoint:

<table class="ms-listviewtable">
   <tr>
      <th></th>
   </tr>
   <tr>
      <td></td>
   </tr>
</table>

how can I use Jquery to on document load to change the layout of this table to look like

  <table class="ms-listviewtable">
  <thead>
   <tr>
      <th></th>
   </tr>
  </thead>
  <tbody>
   <tr>
      <td></td>
   </tr>
 </tbody>
</table>

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

Answer 2

var $t = $("table.ms-listviewtable");
if ($t.has("tbody")) $t.find("tbody").children().unwrap();
$t.find("tr:first").wrap("<thead />");
$t.find("tr").not(":first").wrapAll("<tbody />");

http://jsfiddle.net/ghodmode/p4pvT/

Update: +1 for Blender for pointing out my error. My original version did in fact create an extra set of tbody tags. The jsFiddle has been updated, too.

Answer 3

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.

});

Answer 4

Working jsFiddle Demo

I've used this algorithm, it works for multiple tables, with multiple rows for thead and tbody.

$(function () {
    // loop through all tables with specific class
    $('.ms-listviewtable').each(function () {
        var $table = $(this);

        // find all thead rows and save the index
        var thead = [];
        $table.find('tr > th').each(function () {
            var index = $(this).closest('tr').index();
            if ($.inArray(index, thead) == -1) {
                thead.push(index);
            }
        });

        // find all tbody rows and save the index
        var tbody = [];
        $table.find('tr > td').each(function () {
            var index = $(this).closest('tr').index();
            if ($.inArray(index, tbody) == -1) {
                tbody.push(index);
            }
        });

        // make tbody and thead tags
        var $tbody = $('<tbody></tbody>');
        var $thead = $('<thead></thead>');

        // insert thead rows from table to new thead element
        $.each(thead, function (i, v) {
            $table.find('tr').eq(v).clone(true).appendTo($thead);
        });     

        // insert tbody rows from table to new tbody element
        $.each(tbody, function (i, v) {
            $table.find('tr').eq(v).clone(true).appendTo($tbody);
        });

        // make table fresh
        $table.html('');
        $thead.appendTo($table);
        $tbody.appendTo($table);
    });
});

Answer 5

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