JSFiddle - React, Tailwind, and code Playground

by dafastestfingers

HTML

<table id="table_designer">
    <tr class="table_name">
        <td><input type="text" placeholder="table name" /></td>
    </tr>
    <tr class="field_name">
        <td>name</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="type">
        <td>type</td>
        <td><select>
            <option>int</option>
            <option>varchar</option>
            <option>date</option>
        </select></td>
    </tr>
    <tr class="primary_key">
        <td>primary key</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr class="relationship">
        <td>related type</td>
        <td><select>
            <option>none</option>
            <option>one to many</option>
            <option>many to one</option>
            <option>many to many</option>
        </select></td>
    </tr>
    <tr class="related_table">
        <td>related table</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="related_field">
        <td>related field</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="controls">
        <td><button id="save">save</button></td>
        <td>
            <button id="delete">delete</button>
            <button id="add">add</button>
        </td>
    </tr>
</table>

CSS

tr > td {
    padding: 5px;
}

input, select, option {
    display: block;
    margin: auto;
    width: 100px;
}

JavaScript

(function(){
    // parses table as json and sends to server
    $('#save').click(function() {
        var json= {};
        
        $('#table_designer tr').each(function(){
            var $t = $(this),
                prop = $t.attr('class');
            
            json[prop] = [];
            
            $t.children('td').each(function() {
                json[prop].push($(this).children().first().val());
            });
        });
        
        alert(JSON.stringify(json, null, " "));
        /*
        $.post('www.mysite.com', json, function(d, t, j) 
               { alert('success'); });
        */
    });

    // deletes parent column
    $('#delete').click(function() {
        var $t = $(this),
            pos = $t.parents('td').index() + 1;
            
        $('#table_designer tr').each(function(){
            $(this).children('td:nth-child(' + pos +')').remove();
        });
    });

    // adds a new field
    $('#add').click(function() {
        var $t = $(this),
            pos = $t.parents('td').index() + 1;
            
        $('#table_designer tr').each(function(){
            var clone = $(this).children('td').last().clone(true);
            clone.children('input').val('');
            $(this).children('td:nth-child(' + pos +')').after(clone);
        });
    });
})();