JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<table>
    <tr>
        <td>this is a test</td>
    </tr>
    <tr>
        <td>this is a test</td>
    </tr>
    <tr>
        <td>this is a test</td>
    </tr>
    <tr>
        <td>this is a test</td>
    </tr>
    <tr>
        <td>this is a test</td>
    </tr>
    <tr>
        <td>this is a test</td>
    </tr>
</table>

JavaScript

[].splice.call(document.getElementsByTagName('td'), 0).forEach(function (e) {
     e.addEventListener('click', function (c) {
         var style = getComputedStyle(c.target);
         var inputbox = document.createElement('input');
         inputbox.addEventListener('keydown', function (k) {
             if (k.keyCode == 13 || k.which == 13) {
                 this.parentElement.innerHTML = this.value;
                 k.preventDefault();
             }
         });
         inputbox.setAttribute('type', 'textbox');
         inputbox.value = c.target.textContent.trim();
         c.target.innerHTML = '';
         inputbox.focus();
         c.target.appendChild(inputbox);
         inputbox.style = style;
         inputbox.focus();
         inputbox.addEventListener('blur', function () {
             this.parentElement.innerHTML = this.value;
         });
     });
 });