JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-bordered">
    <thead class="mbhead">
        <tr class="mbrow">
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<button id="saveButton">save</button>

CSS

th, tr {
    height:25px;
    width:80px;
    background:blue;
}

JavaScript

$("table.table tr th").bind("click", headerClick);
$("table.table tr td").bind("click", dataClick);
$("#saveButton").bind("click",saveButton);
                      
function headerClick(e) {
    console.log(e);
    $(e.currentTarget).css({
        color:"red"
    });
}

function dataClick(e) {
    console.log(e);
    if (e.currentTarget.innerHTML != "") return;
    if(e.currentTarget.contentEditable != null){
        $(e.currentTarget).attr("contentEditable",true);
    }
    else{
        $(e.currentTarget).append("<input type='text'>");
    }    
}
function saveButton(){
    $("table.table tr td").each(function(td, index){
        console.log(td);
        console.log(index);
    });
}