JSFiddle - React, Tailwind, and code Playground

by denov

HTML

<input type="button" value="Delete row" id="delRow" class="delete"/>
<input type="button" value="Delete column" id="delCol"class="delete"/>
<input type="button" value="Delete Action" id="delAck"class="delete"/>
<br /><br />
<input type="text" id="rowText"> <input type="button" value="Add row" id="addRow" class="append_row"/><br/>
<input type="text" id="ackText"> <input type="button" value="Add Action" id="addAck" class="append_action"/><br/>
<input type="text" id="colText"> <input type="button" value="Add column" id="addCol" class="append_column"/><br/>

<br/><br/></p>

<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
   <td>A</td>
   <td>HTML</td>
   <td>table</td>
</tr>
</table>
<table id="out_table" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>You selected</td>
    <td><div id="output"></div></td>
</tr>
</table>

CSS

.row{background-color:#FFD6D6;width:53px;margin:3px;}
.ack{background-color:#77D6D6;width:53px;margin:3px;}
.col{background-color:#D6FFD6;width:53px;margin:3px;}

table#my_table{border-collapse:collapse;}
table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font-size:10pt;text-align:center;padding:0;}

table#out_table{border-collapse:collapse;}
table#out_table td{width:75px;height:27px;border:0px;font-size:10pt;text-align:center;padding:0;}

.append_row{background-color:#FFD6D6;border:1px #ccc solid;width:80px;}
.append_action{background-color:#77D6D6;border:1px #ccc solid;width:80px;}
.append_column{background-color:#D6FFD6;border:1px #ccc solid;width:80px;}
.delete{background-color:#eee;border:1px #ccc solid;}

JavaScript

dojo.ready(function() {

    var addRowBtn = dojo.byId('addRow');
    var addColBtn = dojo.byId('addCol');
    var addAckBtn = dojo.byId('addAck');
    var delRowBtn = dojo.byId('delRow');
    var delColBtn = dojo.byId('delCol');
    var delAckBtn = dojo.byId('delAck');

    var numOfDefaults = 1;
    var numOfRows = 0;
    var numOfAcks = 0;
    var numOfCols = 0;

    var createCell = function(cell, text, style, cellVal) {
        var div = document.createElement('div');
        var txt = document.createTextNode(text == "" ? "DEFAULT" : text);

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "name";
        checkbox.value = cellVal;
        checkbox.id = "id" + cellVal;
        checkbox.onclick = function() {
            dojo.byId('output').innerHTML = this.value;
        }

        if (cellVal == undefined) {
            div.onclick = function() {
                dojo.byId('output').innerHTML = "Open editor...";
            }
        }
        var cellObj = (cellVal == undefined) ? txt : checkbox;
        div.appendChild(cellObj);
        div.setAttribute('class', style);
        div.setAttribute('className', style);
        cell.appendChild(div);
    }


    dojo.connect(addRowBtn, 'onclick', function() {
        var tbl = dojo.byId('my_table'),
            row = tbl.insertRow(numOfDefaults + numOfRows++),
            i;

        for (i = 0; i < tbl.rows[0].cells.length; i++) {
            var text = i == 0 ? dojo.byId('rowText').value : i;
            var val = i == 0 ? undefined : [numOfRows, i];
            createCell(row.insertCell(i), text, 'row', val);
        }
    });


    dojo.connect(addAckBtn, 'onclick', function() {
        var tbl = dojo.byId('my_table'),
            row = tbl.insertRow(tbl.rows.length),
            i;
        numOfAcks++;
        for (i = 0; i < tbl.rows[0].cells.length; i++) {
            var text = i == 0 ? dojo.byId('ackText').value : i;
            var val...