JSFiddle - React, Tailwind, and code Playground

by brandonzylstra

HTML

<button onclick="newRow()">New Row</button>  <button onclick="newCol()">New Column</button>
<table id="report"><tr><td><input type="text" /></td></tr></table>
<div id="download"></div>

CSS

table {
    max-width: 100%;
    background-color: transparent;
    margin-bottom: 10px;
    border-spacing: 0;
    border: 1px solid #dddddd;
    border-collapse: separate;
    border-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
table tbody tr:nth-child(odd) td {
    background-color: #f9f9f9;
}
table tbody tr:nth-child(odd) td input {
    background-color: #f9f9f9;
}
input {
    margin: 0px;
    width: 45px;
}

JavaScript

function updateCSV() {
    var csv = "";
    $("table").find("tr").each(function () {
        var sep = "";
        $(this).find("input").each(function () {
            csv += sep + $(this).val();
            sep = ",";
        });
        csv += "\n";
    });
    window.URL = window.URL || window.webkiURL; //webiT?URL?
    var blob = new Blob([csv]);
    var blobURL = window.URL.createObjectURL(blob);
    $("#download").html("");
    $("<a></a>")
    .attr("href", blobURL)
    .attr("download", "report.csv")
    .text("Download Data")
    .appendTo('#download');
}

// these are only relevant to the demo, and useless in a real application:
function newRow() {
    $("table").find("tr:last").clone().appendTo($("table"));
    $("table").find("tr:last").find("input").each(function () {
        var randomnumber = Math.floor(Math.random() * 100);
        $(this).val(randomnumber);
    });
    updateCSV();
}
function newCol() {
    $("table").find("tr > td:last").clone().appendTo($("tr"));
    $("table").find("tr").find("input:last").each(function () {
        var randomnumber = Math.floor(Math.random() * 100);
        $(this).val(randomnumber);
    });
    updateCSV();
}
$(document).ready(function () {
    var randomnumber = Math.floor(Math.random() * 100);
    $("input").val(randomnumber);
});