JSFiddle - React, Tailwind, and code Playground

by carloscalla

HTML

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

JavaScript

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