JSFiddle - React, Tailwind, and code Playground

by hunter

HTML

<table width='50%' id='tabs'>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

<label style="color: red"></label>

JavaScript

$("table").on("click", "td:not(.active)", function () {    
    $("label").html("td click<br />" + $("label").html());
    var $this = $(this);
    var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
    $this.html($textbox);
    $textbox.focus();    
});
                                 
$("table").on("blur", "input:text", function () {        
    $("label").html("input blur<br />" + $("label").html());
    var $this = $(this);
    $this.parent().removeClass("active").text($this.val());
});