JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="content">
            <form>
                <input type="text" placeholder="Name" id="yourname" />
                <input type="text" placeholder="Quest" id="yourquest" />
                <input type="text" placeholder="Favorite Color" id="yourfavecolor" />
                <button>Add to table</button>
            </form>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Quest</th>
                    <th>Favorite Color</th>
                </tr>
            </table>
        </div>
    </body>
</html

CSS

table
{
    font-family: Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}
td, th 
{
    font-size:1em;
    border:1px solid #AAF;
    padding:30px;
}

th 
{
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#33A;
    color:#ffffff;
}

JavaScript

$(function() {
    $(":button").click(function(event) {
        //Make a new table row (but don't insert it just yet
        var newTableRow = $("<tr/>");
        
        //For every textbox, add a corresponding data column to the new table row
        $.each($(":text"), function(index, obj) {
            //Store the id of the textbox the data is from in the "from" attribute.
            newTableRow.append('<td from="' + $(this).prop("id") + '">' + $(this).val() + '</td>');
        });
        //Append the row to the table
        newTableRow.appendTo("table");
        //When the row is clicked
        newTableRow.click(function() {
            //$(this) refers to the row element here
            //For every child element (td element)
            $.each($(this).children(),function(index, obj) {
                //$(this) refers to the td element here
                //In the textbox with the id we previously stored in the from attribute
                //Set the value of that textbox to the value of this td
                $("#" + $(this).attr("from")).val($(this).text());
            });
            //$(this) refers to the row element here
            $(this).remove();
        });
        //Reset the form
        //$("form")[0].reset();
        event.preventDefault();
    });
});