JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
</div>
<br/>
<button id="css-irow">Row +</button>
<br/>
<button id="css-drow">Row -</button>
<br/>
<button id="css-icol">Col +</button>
<button id="css-dcol">Col -</button>
<br/>

CSS

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}

JavaScript

function generateDefaultRow() {
    return $('<div class="ws-css-table-tr"><div class="ws-css-table-td"></div></div>');
}

$('#css-irow').click(function() {
    var row = $(".ws-css-table-tr:last");
    if(row.length === 0) {
        row = generateDefaultRow();
    }
    row.clone().appendTo('.ws-css-table')
        .find(".ws-css-table-td").text("");
});

$('#css-drow').click(function() {
    $(".ws-css-table-tr:last-child").remove(); 
});

$('#css-icol').click(function() {
    var rows = $(".ws-css-table-tr");
    if(rows.length === 0) {
        generateDefaultRow().appendTo('.ws-css-table')
        .find(".ws-css-table-td").text("");
    } else {
        rows.each(function(i, row) {
            $(".ws-css-table-td:last", row).clone().appendTo(row).text("");
        });
    }
});

$('#css-dcol').click(function() {
    $(".ws-css-table-td:last-child").remove(); 
    if($(".ws-css-table-td").length === 0) {
        $(".ws-css-table-tr").remove();
    }
});