JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<html>
    <head>
        <style>
            input { margin: 5px; }
            table { border-collapse: collapse; margin: 25px 0; }
            td { padding: 5px; border: 1px solid #BBB; width: 60px; text-align: center; }
            #newData { font-family: "Courier New", tahoma; font-size: 0.8em; border: 1px solid #BBB; }
        </style>
    </head>
    <body onload="javascript:Init();">
        <input type="button" id="step1" value="Step 1." onclick="javascript:stepOne(this);" />
        Queue some "working items" in the below table.<br />
        <input type="button" id="step2" value="Step 2." onclick="javascript:stepTwo(this);" />
        Load some HTML data behind the scenes<br />
        <input type="button" id="step3" value="Step 3." onclick="javascript:stepThree(this);" />
        Append the data "covertly"<br />
        <input type="button" id="step3a" value="Step 3a." onclick="javascript:stepThreeA(this); "/>
        Now do it the wrong way and watch the workers die.
        <table id="dataTable"></table>
        <h4>"Sample" HTML Data:</h4>
        <div id="newData"></div>
    </body>
</html>

JavaScript

/* Populate sample (bogus) data */

function addRow(table,tr){
    var tr = document.createElement('tr');
    document.getElementById(table).appendChild(tr);
    return tr;
}
function addCell(tr,content){
    var td = document.createElement('td');
    td.innerHTML = content;
    tr.appendChild(td);
    return td;
}
var newData = '', cellId = 0, newCellId = 1000;
function Init(){
    for (var r = 0; r < 5; r++){
        newData += '<tr>';
        var tr = addRow('dataTable');
        for (var c = 0; c < 7; c++){
            newData += '<td>New Data</td>';
            var td = addCell(tr,'Data');
            td.id = cellId++;
        }
        newData += '</tr>';
    }
    document.getElementById('newData').appendChild(document.createTextNode(newData));
}

/*
 * Step 1
 * the "working items"
 */
var workingFields = [];
function stepOne(btn){
    var table = document.getElementById('dataTable');
    
    for (var r = 0; r < 10; r++){
        var randRow = Math.floor(Math.random() * table.rows.length);
        var randCell = Math.floor(Math.random() * table.rows[0].cells.length);
        
        workingFields.push(table.rows[randRow].cells[randCell]);
    }
    toggleWorking();
    
    btn.disabled = true;
}
function toggleWorking(){
    for (var i = 0; i < workingFields.length; i++){
        var c = workingFields[i];
        c.innerHTML = (c.innerHTML == 'Data' ? 'Working' : 'Data');
    }
    setTimeout('toggleWorking();',1000);
}

/*
 * Step 2
 * Make a dummy html table and loa the new data under the radar
 */
function stepTwo(btn){
    var table = document.createElement('table');
    table.style.display = 'none';
    table.id = 'newDataTable';
    table.innerHTML = newData;
    document.getElementsByTagName('body')[0].appendChild(table);
    
    btn.disabled = true;
}

/*
 * Step 3
 * Move the rows over covertly from the hidden table to the new table
 */
function stepThree(btn){
    var newDataTable = document.getElementById('newDataTable');
    var dataTable...