Grant Grant - 8 days ago 7
HTML Question

How to create vertical html table from 2d array using javascript

I am taking creating a html table using data from a function that returns a 2d array, but need help making the table go vertically instead of horizontally. Right now, I followed the steps from the answers in this stack overflow question but am having trouble completely understanding the code so that I can fix it for my use case.

Here is the html code as I have it now:

/**
* Adds an html table
*/
function createTable(inputData) {
//Checks for error - if so, does not output table
if (inputData == "ERROR") {
document.getElementById('errorMessage').innerHTML = "Error: Unable to find sport";
} else {
var tableData = JSON.parse(inputData);
var table = document.createElement('table');
table.setAttribute("id", "table");
var tableBody = document.createElement('tbody');

tableData.forEach(function(rowData) {
var row = document.createElement('tr');

rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});

tableBody.appendChild(row);
});

table.appendChild(tableBody);
document.body.appendChild(table);
}
}


How can I change this to make the table go vertically instead of horizontally? If possible, I want don't want to change how the table is created (it is being embedded in a google script, which I asked about before).

Edit: The tableData is:
[["Person A", "Person B", "Person C", "Person D"], ["Wed Jun 29 12:30", "Thu Jun 30 13:45", "Thu Jun 30 13:46", "Fri Jul 1 15:40"]]

Answer

Try this one. And the working fiddle.

data = '[["Person A", "Person B", "Person C", "Person D"], ["Wed Jun 29 12:30", "Thu Jun 30 13:45", "Thu Jun 30 13:46", "Fri Jul 1 15:40"]]';
function createTable(inputData) {
  //Checks for error - if so, does not output table
  if (inputData == "ERROR") {
    document.getElementById('errorMessage').innerHTML = "Error: Unable to find sport";
  } else {
    var tableData = JSON.parse(inputData);
    var table = document.createElement('table');
    table.setAttribute("id", "table");
    var tableBody = document.createElement('tbody');
    var rows = [];
    // use the first element in the array to build table rows
    header = tableData.pop(0);
    header.forEach(function(headerData) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.appendChild(document.createTextNode(headerData));
        row.appendChild(cell);
        rows[rows.length] = row;
    });
    // now go through the rest to update the rows array
    tableData.forEach(function(rowData) {
        var numRow = 0;
        rowData.forEach(function(cellData) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(cellData));
            rows[numRow].insertBefore(cell, rows[numRow].firstChild);
            ++numRow;
        });
    });
    // now append those childs to the tableBody
    rows.forEach(function(row) {
        tableBody.appendChild(row);
    });
    table.appendChild(tableBody);
    document.body.appendChild(table);
  }
}

createTable(data);
Comments