JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
            <th>header6</th>
            <th>header7</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>3</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<button onclick="deletecolumn()">delete column</button>
<button onclick="insertcolumn()">insert column</button>
<button onclick="deleterow()">delete row</button>
<button onclick="insertrow()">insert row</button>
<button onclick="cleartable()">clear table</button>

CSS

table td, th {
    border: 1px solid black;
}
td, th {
    width: 50px;
    height: 50px;
}
.highlighted {
    background-color: #348A75;
}

JavaScript

$('th').click(function () {
    $('*').removeClass('highlighted');
    t = parseInt($(this).index()) + 1;
    $(this).addClass('highlighted');
    $('td:nth-child(' + t + ')').addClass('highlighted');
});
$('td').click(function () {
    if (parseInt($(this).index()) == 0) {
        $('*').removeClass('highlighted');
        $(this).parent().addClass('highlighted');
    } else {
        $('*').removeClass('highlighted');
    }
});

function deletecolumn() {
    if ($(".highlighted").prop("tagName") != "TR" && $("th").length > 1) {
        $('.highlighted').remove();
    }
    $('*').removeClass('highlighted');
}

function deleterow() {
    if ($(".highlighted").prop("tagName") == "TR" && $("tr").length > 2) {
        $('.highlighted').remove();
    }
    $('*').removeClass('highlighted');
}

function insertcolumn() {
    t = parseInt($("th[class='highlighted']").index()) + 1;
    $('td:nth-child(' + t + ')').before('<td></td>');
    $('th:nth-child(' + t + ')').before('<th></th>');
    $("th").bind("click", function () {
        $('*').removeClass('highlighted');
        t = parseInt($(this).index()) + 1;
        $(this).addClass('highlighted');
        $('td:nth-child(' + t + ')').addClass('highlighted');
    });
      $("td").bind("click", function () {
            if (parseInt($(this).index()) == 0) {
                $('*').removeClass('highlighted');
                $(this).parent().addClass('highlighted');
            } else {
                $('*').removeClass('highlighted');
            }
        });
    $('*').removeClass('highlighted');
}

function insertrow() {
    if ($(".highlighted").prop("tagName") == "TR") {
        $('.highlighted').before(function () {
            var temp = "<tr>";
            for (var i = 0; i < $(this).eq(0).children("td").length; i++) {
                temp += "<td></td>";
            }
            temp += "</tr>";
            return temp;
        });
        $("td").bind("click", function () {
            if...