JSFiddle - React, Tailwind, and code Playground

by ilazarte

HTML

<table width="340" id="dt">
    <tr>
        <td width="30%"><a href="#" tabindex="0" class="tgt">Ivan</a></td>
        <td width="30%"><a href="#" tabindex="0" class="tgt">Dan</a></td>
        <td width="30%"><a href="#" tabindex="0" class="tgt">Willie</a></td></tr>
</table>

CSS

#dt {
    border:collapse;
}

/*http://doctype.com/input-width-inside-table-cell*/
/*white-space only seems to work with fixed widths*/
#dt th, #dt td {
    padding:0px;
    border:1px solid black;
    white-space: nowrap;
    height:25px;
}

#dt .tgt {
    display:block;
    text-decoration:none;
    color:black;
    font-family:Arial;
    font-size:12px;
    height:100%;
}

#dt .tgt:hover {
    background-color:blue;
    color:white;
}

#dt .editing {
    display:none;
}

#dt .editor {
    font-family:Arial;
    font-size:12px;
    border:none;
    height:100%;
}

JavaScript

function edit(evt) {
    
    var w = $(this).width();
    var h = $(this).height();
    var $t = $(this);
    $t.addClass("editing")
      .after('<input type="hidden" name="firstname" class="value"/>' + 
               '<input type="text" name="editor" class="editor"/>');
    
    $t.siblings(".editor")
        .width(w)
        .height(h)
        .val($t.text());
}

function keydown(evt) {
    var key = parseInt(evt.which);
    if (key != 27) {
        return;
    }
    $(".editor").remove();
    $(".editing").removeClass("editing");
}

$("#dt")
    .on("click", ".tgt", edit)
    .on("keydown", ".editor", keydown);