JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<table id="dataTable">
    <tr>
        <th>Functional Category</th>
        <th>Brand Name</th>
        <th>When Obtained</th>
        <th>How Obtained</th>
        <th>How Often Worn</th>
        <th>Where It's Made</th>
        <th>Has a Graphic</th>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Monthly</td>
        <td>India</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>RVCA</td>
        <td>2 Years Ago</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Mexico</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>Dogfish Head</td>
        <td>Last 6 Months</td>
        <td>Gift</td>
        <td>Tri-Monthly</td>
        <td>Honduras</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Weekly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>Zine</td>
        <td>Last 3 Months</td>
        <td>Gift</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Long-sleeve</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Tri-Monthly</td>
        <td>Chicago</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Montly</td>
       ...

CSS

#dataTable {
    display:none;
}

JavaScript

var array = [];
    var headers = [];
    $('#dataTable th').each(function(index, item) {
        headers[index] = $(item).html();
    });
    $('#dataTable tr').has('td').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            arrayItem[headers[index]] = $(item).html();
        });
        array.push(arrayItem);
    });

var testString = JSON.stringify(array);

var section = $("section");
var table = $('<table border="1"><tr></tr>');
for (var j = 0; j < array.length; j++) {
    var currentHash = array[j];
    var tr = $('<tr>');
    for (var k in currentHash) {
        var td = $('<td>'+currentHash[k]+'</td>');
        td.appendTo(tr);
    }
    tr.appendTo(table);
}
table.appendTo(section);
var row = $(table+'tr:first'); 
for (var i=0; i < headers.length; i++) {
    $("<th />").html(headers[i]).appendTo(row);
}