JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<button type="button" disabled id="btnGo">Go</button><br />
<table id="tideTable" style="Width:40%;margin-left:auto;margin-right:auto;">
</table>

JavaScript

(function() {
    var mmm = ['one', 'two', 'three', "four", "five", "six", "seven"];
    function publishTable() {
    //  The user may run this several times, varying some parameters each time.
        var tStart = performance.now();
        var table = document.getElementById('tideTable');
        var tableBody = table.getElementsByTagName('tbody')[0];
        if (tableBody) {
            tableBody.parentNode.removeChild(tableBody);
            }
        tableBody = document.createElement('tbody');
        for (var i=0; i < 8500; i++) {
            appendTableRow(tableBody, mmm);
            }
        table.appendChild(tableBody);
        document.getElementById("btnGo").disabled = false;
        alert("Time: " + (performance.now() - tStart) +  "ms");
    }

    function appendTableRow(tableBody, columns) {
        var cell;
        var textNode;
        var row = tableBody.insertRow(-1);
        for (var i = 0; i < columns.length; i++) {
            cell = row.insertCell(i);
            textNode = document.createTextNode(columns[i]);
            cell.appendChild(textNode);
        }
    }

    document.getElementById("btnGo").addEventListener("click", publishTable);
    publishTable();
})();