jQuery to transpose HTML table with header and footer

Question

I need to transpose an HTML table (swap rows and columns). I found numerous jQuery plugins but they are more than what I need.

I adapted some neat jQuery code from this stack but it does not work on tables that include thead and tfoot elements.

function tableTransform(objTable) {
    objTable.each(function () {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function () {
            var i = 0;
            $(this).find("td").each(function () {
                i++;
                if (newrows[i] === undefined) {
                    newrows[i] = $("<tr></tr>");
                }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function () {
            $this.append(this);
        });
    });

    return false;
}

I created the fiddle below that provides an example of the markup and the code. Can someone update the function so it supports thead and tfoot elements?

http://jsfiddle.net/4tobvo05/4/

Just like the existing code, the new code must maintain the class and style values on each td as well as the table itself so the CSS is applied properly. It also needs to fixup the tfoot so it contains the correct number td cells that wrap a non-breaking space.

This appears to be mostly working. The key thing you need to change, is to tell your `td` selector to also look for `th`. `$(this).find("td, th").each(function () { ... }` — Bic, Sep 11 '14 at 16:10

score 5 · Accepted Answer · answered Sep 11 '14 at 21:42

I hacked away at the function to get it to do what I need. The updated version is below.

function tableTransform(objTable) {
    if (typeof objTable != 'undefined') {
        objTable.each(function () {
            var $this = $(this);
            var newrows = [];
            $this.find("tbody tr, thead tr").each(function () {
                var i = 0;
                $(this).find("td, th").each(function () {
                    i++;
                    if (newrows[i] === undefined) {
                        newrows[i] = $("<tr></tr>");
                    }
                    newrows[i].append($(this));
                });
            });
            $this.find("tr").remove();
            $.each(newrows, function () {
                $this.append(this);
            });
        });
        //switch old th to td
        objTable.find('th').wrapInner('<td />').contents().unwrap();
        //move first tr into thead
        var thead = objTable.find("thead");
        var thRows = objTable.find("tr:first");
        var copy = thRows.clone(true).appendTo("thead");
        thRows.remove();
        //switch td in thead into th
        objTable.find('thead tr td').wrapInner('<th />').contents().unwrap();
        //add tr back into tfoot
        objTable.find('tfoot').append("<tr></tr>");
        //add tds into tfoot
        objTable.find('tbody tr:first td').each(function () {
            objTable.find('tfoot tr').append("<td>&nbsp;</td>");
        });
        return false;
    }
}

I also created the updated fiddle below.

http://jsfiddle.net/4tobvo05/7/

I'm sure there are many optimizations or improvements that could be made so I am open to any suggestions that anyone might have.

I was able to use this function for my SharePoint table. It needed a lot of work, but it was doable. Neat! — RubbelDieKatz, Jul 11 '18 at 14:16

score 0 · Answer 2 · edited Nov 09 '15 at 17:00

This code will work with row and colspan as well.

jQuery("#table1").each(function() {
  var jthis = jQuery(this);
  var newrows = [];
  var row = 0;
  jthis.find("tr").each(function(){
    row++;
    var col = 0;
    var prev_colspan = 0;
    var prev_rowspan = 0;
    var row_count = 0;
    jQuery(this).find("td").each(function(){
      col++;
      var colspan = jQuery(this).attr("colspan");
      var rowspan = jQuery(this).attr("rowspan");
      if (colspan === undefined) {colspan = 0;}
      if (rowspan === undefined) {rowspan = 0;}
      jQuery(this).attr("rowspan",colspan);
      jQuery(this).attr("colspan",rowspan);           
      var existing_row = jQuery(this).attr("row");
      var existing_col = jQuery(this).attr("col");
      row_count = col + prev_colspan;

      if (existing_row === undefined || existing_col === undefined) {
        jQuery(this).attr("row", row + prev_rowspan);
        jQuery(this).attr("col", col + prev_colspan);
      }
      else {
        row_count = existing_row;
        jQuery(this).attr("col", existing_row);
        jQuery(this).attr("row", existing_col);
      }
      if(newrows[row_count] === undefined) { newrows[row_count] = jQuery("<tr></tr>"); }
      newrows[row_count].append(jQuery(this));
      if (existing_row === undefined || existing_col === undefined) {
        if (colspan > 0) {prev_colspan = parseInt(colspan) - 1; }
        else {prev_colspan = 0;}
        if (rowspan > 0) {prev_rowspan = parseInt(rowspan) - 1;}
        else {prev_rowspan = 0;}
      }
    });
  });
  jthis.find("tr").remove();
  jQuery.each(newrows, function(){
    jthis.append(this);
  });
});

jQuery to transpose HTML table with header and footer

2 Answers2

Linked