JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<input type='button' onclick='tableCreate()' value='create' />
<a href="#" id="add" onclick="addColumn('wveTable')">Add Column</a>

JavaScript

function tableCreate() {
    var body = document.getElementsByTagName('body')[0];
    var tbl = document.createElement('table');
    tbl.style.width = '500';
    tbl.setAttribute('border', '3');

    tbl.id = 'wveTable';

    var header = tbl.createTHead();

    var row = header.insertRow(0); // adds to begining
    for (var i = 0; i < 2; i++) {
        var cell = row.insertCell(-1); // adds to the end
        if (i % 2 === 0) {

            cell.innerHTML = "<b>DEV ( " + (i + 1) + " )</b>";
            cell.align = "center";
        }
        if (i % 2 == 1) cell.innerHTML = "<b>VAL ( " + (i + 1) + " )</b>";
        cell.align = "center";
    }

    var tbdy = document.createElement('tbody');
    var memNum = 1;
    for (i = 0; i < 4; i++) { // ROWS
        var tr = document.createElement('tr');
        for (var j = 0; j < 2; j++) { // COLUMN

            input = document.createElement("input");
            input.type = "text";
            input.size = "12";
            input.maxLength = "5";
            input.name = "wveVal" + memNum;
            input.setAttribute('align', 'center');
            memNum++;

            input.value = input.name;

            var td = document.createElement('td');
            td.setAttribute('width', '200');
            td.setAttribute('height', '50');
            td.setAttribute('align', 'center');
            //td.style.width = '20';

            td.appendChild(input);

            tr.appendChild(td);

        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl);
}

// 2006-08-21 - Created
// 2006-11-05 - Modified - head and body
function addColumn(tblId) {
    var tblHeadObj = document.getElementById(tblId).tHead;
    for (var h = 0; h < tblHeadObj.rows.length; h++) {
        var newTH = document.createElement('th');
        tblHeadObj.rows[h].appendChild(newTH);
        newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1);
    }

    var tblBodyObj =...