JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<form id="form">
    <input id="name" type="text" name="name" />
    <input id="hobby" type="text" name="hobby" />
    <input type="submit" />
</form>
<table id="fish">
    <thead>
        <tr>
            <td>Remove</td>
            <td>Name</td>
            <td>Hobby</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CSS

thead td {
    background-color: #ddd;
}
thead td + td {
    width: 150px;
}
tbody td {
    background-color: #eee;
}

a {
    text-decoration: none;
    color: #333;
}

JavaScript

$('#form').on('submit', function () {
    $('<tr><td><button>X</button></td><td><a href="#">' + $('#name').val() + '</a></td><td><a href="#">' + $('#hobby').val() + '</a></td></tr>')
        .appendTo('#fish tbody').hide().fadeIn();
    return false;
});

$('#fish').on('click', 'button', function () {
    $(this).closest('tr').fadeOut(function () {
        $(this).remove();
    });
});

$('#fish').on('click', 'tbody td + td', function () {
    var self = $(this);
    if (self.children('input').length === 0) {
        var val = self.text();
        self.html('');
        $('<input type="text" style="width: 130px">').appendTo(this).val(val).select().focus().on('keypress', function (e) {
            if (e.keyCode === 13) {
                self.html('<a href="#">'+$(this).val()+'</a>').find('a').focus();
            }
        }).on('blur', function () {
            self.html('<a href="#">'+val+'</a>').find('a').focus();
        });
    }
});