JavaScript/JQuery swap horizontal and vertical order of HTML table

Question

I have a complex HTML table with horizontal and vertical headings looking like this.

The HTML code is simple:

<table>
    <tr>
      <th>(empty)</th>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
 <tr>
  <th>Heading A</th>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
  <th>Heading B</th>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
  <th>Heading C</th>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
</table>

Now, I want to give the users of my website the possibility to swap the content of the table. I.e.: change the horizontal and vertical order, so that afterwards the vertical headings are horizontal, the horizontal headings are vertical and the table cells accordingly. Sounds complicated, but you will get it by looking at the picture:

The HTML would be now:

<table>
    <tr>
      <th>(empty)</th>
      <th>Heading A</th>
      <th>Heading B</th>
      <th>Heading C</th>
    </tr>
 <tr>
  <th>Heading 1</th>
     <td>content for 1 and A</td>
     <td>content for 1 and B</td>
     <td>content for 1 and C</td>
 </tr>
 <tr>
  <th>Heading 2</th>
     <td>content for 2 and A</td>
     <td>content for 2 and B</td>
     <td>content for 2 and C</td>
 </tr>
</table>

Technically speaking, evey table cell (th and td) has to swap its indices: The column index should become the row index and the column index should become the rown index. But how do I do that using JavaScript and or JQuery?

I already found out how to get the row and column index:

//column
$(this).parent().children().index(this);

//row
$(this).parent().parent().children().index(this.parentNode);

But there seems no JQuery function for "set table cell position", there is just .inserAfter and honestly, I don't know how to cope with that.

Answer 1

Change your html like this

<table>
<tbody>
    <tr>
      <td>(empty)</td>
      <td>Heading 1</td>
      <td>Heading 2</td>
    </tr>
 <tr>
  <td>Heading A</td>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
  <td>Heading B</td>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
  <td>Heading C</td>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
 </tbody>
</table>

And call this function

function Swap(){
    var t= document.getElementsByTagName('tbody')[0],
    r= t.getElementsByTagName('tr'),
    cols= r.length, rows= r[0].getElementsByTagName('td').length,
    cell, next, tem, i= 0, tbod= document.createElement('tbody');

    while(i<rows){
        cell= 0;
        tem= document.createElement('tr');
        while(cell<cols){
            next= r[cell++].getElementsByTagName('td')[0];
            tem.appendChild(next);
        }
        tbod.appendChild(tem);
        ++i;
    }
    t.parentNode.replaceChild(tbod, t);
}

Test it here

Answer 2

function invertTable(table){

  var $table = $(table);

  var invertedTable = [];

  for(var i=0 ; i < $table.find('tr:first th').length ; i++){

    invertedTable.push([]);

  }

  $table.find('th,td').each(function(){
    invertedTable[$(this).index()].push($(this).text());    
  })

  var $newTable = $('<table></table>');

  for(var i=0 ; i < invertedTable.length ; i++){

    var $newTr = $('<tr></tr>');

    for(var j = 0 ; j < invertedTable[i].length ; j++){

        if(j == 0 || i == 0){
            $newTr.append('<th>'+invertedTable[i][j]+'</th>');
        }
        else{
            $newTr.append('<td>'+invertedTable[i][j]+'</td>');
        }

    }

    $newTable.append($newTr);
  }

  $table.after($newTable)
  $table.remove();
} 

http://jsfiddle.net/xybmoadx/1/

Answer 3

Maybe you should build two tables and hide the inapropriate each time.

html :

<table>
    <tr>
      <th>(empty)</th>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
 <tr>
  <th>Heading A</th>
     <td>content for 1 and A</td>
     <td>content for 2 and A</td>
 </tr>
 <tr>
  <th>Heading B</th>
     <td>content for 1 and B</td>
     <td>content for 2 and B</td>
 </tr>
 <tr>
  <th>Heading C</th>
     <td>content for 1 and C</td>
     <td>content for 2 and C</td>
 </tr>
</table>

<table style="display:none;">
    <tr>
      <th>(empty)</th>
      <th>Heading A</th>
      <th>Heading B</th>
      <th>Heading C</th>
    </tr>
 <tr>
  <th>Heading 1</th>
     <td>content for 1 and A</td>
     <td>content for 1 and B</td>
     <td>content for 1 and C</td>
 </tr>
 <tr>
  <th>Heading 2</th>
     <td>content for 2 and A</td>
     <td>content for 2 and B</td>
     <td>content for 2 and C</td>
 </tr>
</table>

notice the style: "display:none;" on second table.

Now all you need to do is toogle tables when ever you whant. Lets say you want to toggle on table click :

$('table').on('click', function() {
  $('table').toggle();
});

This solution assums your table is static. It is a quick and easy workarround though. Hope that helps

PS: you can test it here

Answer 4

function transpose(arr){
    return Object.keys(arr[0]).map(function (c) { return arr.map(function (r) { return r[c]; }); });
}
function transposeTable(table){
    var rows = [];
    var tableString = '';
    table.find('tr').each(function(i,row){
        var rowArray = [];
        row = $(row);
        row.find('th,td').each(function(i,cell){
            cell = $(cell);
            rowArray.push({
                value : cell.text(),
                type : cell.is('th') ? 'th':'td'
            })
        })
        rows.push(rowArray);
    });
    rows = transpose(rows);
    rows.forEach(function(row){
        tableString += '<tr>';
        row.forEach(function(cell){
           tableString += '<' + cell.type + '>';
           tableString += cell.value;
           tableString += '</' + cell.type + '>';  
        })
        tableString += '</tr>';
    });
    return tableString;
}

JSfiddle

Not clean but it works .

Answer 5

Look at this jsfiddle I created for you:

http://jsfiddle.net/carloscalla/yuhx2tgk/3/

It stores the table cell's values in arrays and builds up a table from them. Then swaps the order when button is clicked.

HTML:

<div id="table-wrapper"></div>
<button id="toggler">Toggler</button>

JS:

var max_rows = 4;
var a = new Array();
for (i = 0; i < max_rows; i++)
    a[i] = new Array();

a[0][0] = "(empty)";
a[0][1] = "Heading 1";
a[0][2] = "Heading 2";

a[1][0] = "Heading A";
a[1][1] = "content 1 A";
a[1][2] = "content 2 A";

a[2][0] = "Heading B";
a[2][1] = "content 1 B";
a[2][2] = "content 2 B";

a[3][0] = "Heading C";
a[3][1] = "content 1 C";
a[3][2] = "content 2 C";

var direction = 0;
// 0 for horizontal
// 1 for vertical

function changeDirection(){
    if (direction == 1) direction = 0;
    else if (direction == 0) direction = 1;
    resetTable();
}
function resetTable(){
    var $table_body = $('<table><tbody></tbody></table>');

    if (direction == 0){
        for (x = 0; x < a.length; x++){
            $table_body.append('<tr></tr>');
            $last_row = $table_body.find('tr').last();
            for (v = 0; v < a[x].length; v++){
                $last_row.append('<td>' + a[x][v] + '</td>');
            }
        }
    }
    else{
        for (x = 0; x < a[0].length; x++){
            $table_body.append('<tr></tr>');
            $last_row = $table_body.find('tr').last();
            for (v = 0; v < a.length; v++){
                $last_row.append('<td>' + a[v][x] + '</td>');
            }
        }        
    }

    $('#table-wrapper').html($table_body);
}
$('#toggler').on('click', changeDirection);

Results are these:

Original table:

Updated table:

Answer 6

Buid the array dynamically from javascript. That would be the easiest way to make it... as well as maintain it.

Say a multi-dimensional array [x][y] represents all you need. [0][0] will obviously be null...

Define a table element in HTML give it an ID, say 'table'... In JavaScript then...

Defining it should be easy...

var t = new Array();
t[0] = new Array();
t[0][0] = 'Heading 1';
t[0][1] = 'Heading 2';

and so on..

On jQuery's Document Ready event, you can initialize it...

$(document).ready(function() {
    for (var i = 0; i < t.length; i++) {
        $('#table').append('<tr id=tr' + 0 + '></tr>');
        for (var j = 0; j < t[i].length; j++) {
            if (i == 0)
                $('#tr' + i).append('<th>' + t[i][j] + '</th>');
            else
                $('#tr' + i).append('<td>' + t[i][j] + '</td>');
        }
    }

    var t_trans = t[0].map(function(col, i) {
        return t.map(function(row) {
            return row[i];
        });
    });
});

I've used code from this answer to transpose the created array and store it in a different variable. Transposing a 2D-array in JavaScript

Now all you need to do on click of the 'Transpose Button' in HTML is delete existing markup inside the 'table', and recreate it using the transposed array.. so during the onclick event,

$('#table').empty();
for (var i = 0; i < t_trans.length; i++) {
    $('#table').append('<tr id=tr' + 0 + '></tr>');
    for (var j = 0; j < t_trans[i].length; j++) {
        if (i == 0)
            $('#tr' + i).append('<th>' + t_trans[i][j] + '</th>');
        else
            $('#tr' + i).append('<td>' + t_trans[i][j] + '</td>');
    }
}

This should do it... Hell, you can even make a composite function taking the array as an argument to do the job for you, something like function populate(arr){} and the nested loop inside..

function populate(arr){
    for (var i = 0; i < arr.length; i++) {
        $('#table').append('<tr id=tr' + 0 + '></tr>');
        for (var j = 0; j < arr[i].length; j++) {
            if (i == 0)
                $('#tr' + i).append('<th>' + arr[i][j] + '</th>');
            else
                $('#tr' + i).append('<td>' + arr[i][j] + '</td>');
        }
    }
}

and call populate(t) on ready, populate(t_trans) after emptying it on button-click.