JSFiddle - React, Tailwind, and code Playground

by ostapische

HTML

<table cellpadding="7" id="testTable"><tbody>
    <tr style="background: red">
        <td rowspan="5"></td>
        <td></td>
        <td rowspan="5"></td>
        <td></td>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr style="background: white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr style="background: blue">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr style="background: yellow">
        <td></td>
        <td></td>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr style="background: green">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody></table>

CSS

td button{font-size:12pt;padding:0}

JavaScript

function addRemoveButtons(tableId) {
    $("#" + tableId + " tr").each(function(){
        var tr = $(this);
            var td = $("<td></td>");
                var button = $("<button></button>");
                    button.html('x');
                    button.on("click", function(){
                        hideTr(this);
                    });
                td.append(button);
            tr.append(td);
    });
}
function hideTr(button){
    var button = $(button);
    var tr = button.parent().parent();
    var tableStructure = getTableStructure(tr.parent());
    tr.hide();
}
function getTableStructure(tb) {
    var tbody = $(tb);
    var tableStructure = new Array();
    var trs = tbody.children();
    var tr, tds, j, td, k;
    for (var i = 0; i < trs.length; i++){
        if (tableStructure[i] == null) {
            tableStructure[i] = new Array();
        }
        tr = $(trs[i]);
        tds = tr.children();
        for (j = 0; j < tds.length; j++){
            td = $(tds[j]);
            var rowspan = parseInt(td.attr("rowspan"));
            if (rowspan !== null) {
                for (k = i + 1; k < i + rowspan && k < trs.length; k++) {
                    if (tableStructure[k] == null) {
                        tableStructure[k] = new Array();
                    }
                    tableStructure[k][j] = 0;
                }
            }
            k = 0;
            while (tableStructure[i][k] !== null) {
                k++
            }
            tableStructure[i][k] = 1;
        };
    };
    console.log(JSON.stringify(tableStructure));
    return tableStructure;
}
$(function(){
    addRemoveButtons("testTable");
});