JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td> <span>value</span>

            <input type='text' value='' />
        </td>
        <td>
            <button class="save">Save</button>
            <button class="revert">Revert</button>
        </td>
    </tr>
</table>

CSS

button.save, button.revert, input {
    display: none;
}
tr.edit button.save, tr.edit button.revert, tr.edit input, tr.edit {
    display: inline;
}
tr.edit span {
    display: none;
}

JavaScript

var rows = document.querySelectorAll('table tr');

for(var i = 0, l = rows.length; i < l; i++) {
    rows[i].addEventListener('click', function(event) {
        // all value display elements
        var spans = this.querySelectorAll('span');
        // all form elements
        var inputs = this.querySelectorAll('input');
        // handle click on save button
        if (event.target.className === 'save') {
            [].forEach.call(inputs, function(input, i) {
                spans[i].innerHTML = input.value;
            });
            this.className = '';
        }
        // handle click on revert button
        else if (event.target.className === 'revert') {
             // not much to do
             this.className = '';
        }
        else {
            // update form element values
            [].forEach.call(inputs, function(input, i) {
                input.value = spans[i].innerHTML;
            });
             this.className = 'edit';
        }
    });
}