JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<table class="table table-bordered">
    <thead>
        <tr><th>ID</th>
            <th class="one">Column One</th>
            <th class="two">Column Two</th>
            <th class="thr">Column Three</th>
            <th class="fou">Column Four</th>
            <th class="fiv">Column Five</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>0</td>
            <td class="one quickEdit" data-callback="[1,2,3]">1</td>
            <td class="two quickEdit">2</td>
            <td class="thr quickEdit" data-callback="arbitraryFunc('html')">3</td>
            <td class="fou quickEdit" data-callback="arbitraryFunc('select', 40, 50)">4</td>
            <td class="fiv">5</td>
        </tr>
        <tr><td>1</td>
            <td class="one">awef</td>
            <td class="two">10/25/2000 - 10/25/2000</td>
            <td class="thr">10/25/2000</td>
            <td class="fou"></td>
            <td class="fiv"></td>
        </tr>
        <tr><td>2</td>
            <td class="one">1Mo</td>
            <td class="two quickEdit">11/22/2000 - 12/24/2000</td>
            <td class="thr quickEdit">11/18/2000</td>
            <td class="fou quickEdit"></td>
            <td class="fiv"></td>
        </tr>
        <tr><td>3</td>
            <td class="one">4Mo</td>
            <td class="two">10/31/2012 - 11/30/2012</td>
            <td class="thr">11/20/2012</td>
            <td class="fou"></td>
            <td class="fiv"></td>
        </tr>
        <tr><td>4</td>
            <td class="one quickEdit">6Mo</td>
            <td class="two">12/18/2012 - 1/17/2013</td>
            <td class="thr quickEdit">4/7/2001</td>
            <td class="fou">12/18/2012 - 1/17/2013</td>
            <td class="fiv">2001-04-11T12:00:00</td>
        </tr>
    </tbody>
</table>

CSS

th, td { border: solid 1px #ccc; padding: 5px 10px;
overflow: hidden;
    position: relative;
    font-size: 14px;
    line-height: 14px;
    font-family: serif;
}
td.quickEdit { background-color: #efe; }
#quickEditing {
 position:absolute;
 top:-4px;
left:-2px;
 padding: 0;
    padding-left: 10px;
    font-size: 14px;
    line-height: 14px;
    font-family: serif;
    
}

JavaScript

$(document).ready(function(){
   
    $("table").on("click", "td.quickEdit", function(){
        var $elem;
        var obj = eval($(this).attr("data-callback"));
        var h = $(this).outerHeight() + 4;
        var w = $(this).outerWidth() + 4;
        var initVal = $(this).html();
        $(this).removeClass("quickEdit").addClass("editing").empty();
        
        if(obj&&obj[0]=="select"){
            $elem = $("<select />");
            for(i=1;i<obj.length;i++){
                $elem.append("<option>" + obj[i] + "</option>");
            }
        } else if (obj&&obj[0]=="html"){
            $elem = $("<div />").attr("tabindex","0").html(obj[1]);
        } else { 
            $elem = $("<input />");
        }
        $elem.attr("id","quickEditing").val(initVal).css({height: h, width: w}).appendTo($(this)).focus().select();
        
        $(this).one("blur", "#quickEditing", function(){
            var $rowCells = $("#quickEditing").closest("tr").find("td");
            var $table = $("#quickEditing").closest("table");
            var row = $rowCells.first().html();
            var newVal =  $("#quickEditing").val();
            $("#quickEditing").closest("td").addClass("quickEdit").html(newVal);
    
            //count what column we're in
            var col = 0;
            $rowCells.each(function () {
                console.log(col+$(this).attr("class") + $(this).hasClass("editing"));
                col++;
                if($(this).hasClass("editing")){
                    return false;
                }
            });
            
            var colHead = $table.find("thead th:eq("+col+")").html();
        
            $("#quickEditing").remove();
        


            $("body").append("<br>You saved row "+row+", column "+col+", which had the heading "+colHead  );
        });
    });
    
});

function arbitraryFunc(type, p1, p2) {
    if(type=="select"){
        var packet = [type];
        for(i=1,j=p1;j<p2;i++,j++){
            packet[i]...