JSFiddle - React, Tailwind, and code Playground

by Urvin

HTML

<table class="editable_table" border=1 width=200>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<input type="text" id="editor" tabindex="1">

CSS

body
{
    font-size: 12px;
    font-family: Verdana;
}

#editor
{
    display: none;
    position: absolute;
    z-index:999999;
    outline: none;
    border:none;
}

JavaScript

var gCurCell;
$(document).ready(function(){
    $('.editable_table td').click(function(){
        gCurCell = this;
        var lPos = $(this).position();
        $('#editor').css({
            'top': (lPos.top + 1) + 'px',
            'left': (lPos.left + 1) + 'px',
            'width': $(this).width(),
            'height': $(this).height()
        }).val($(this).html()).show().focus();
    });
    $('#editor').blur(function(){
        $(this).hide();
        $(gCurCell).html($(this).val());
        
        // here joes ajax
    });
});