JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<button id="add">Add</button>
<button id="delete">Delete</button>
<button id="moveup">Move Up</button>
<button id="movedown">Move Down</button>
<button id="get">Get</button>

<table>
    <tr>
        <td><input type="text" placeholder="Enter Attribute Name"/></td>
        <td><select >
            <option value="DOUBLE">DOUBLE</option>
            <option value="INT">INT</option>
            <option value="STRING">STRING</option>
            </select>
    </tr>
</table>

CSS

table {
    margin-top: 10px;
 width: 300px;
border: 1px solid black;  
}

tr{
 line-height: 20px;
 border-bottom : 1px solid #69A9C9;
}

tr:hover,
tr.selected{
 background:#D5EFFC;
}

JavaScript

$(function() {

    $('tr').click(function() {
        $('tr').removeClass('selected');
        $(this).addClass('selected');

    });

    $('#add').click(function() {
        var $tr = $('<tr/>').click(function() {
            $('tr').removeClass('selected');
            $(this).addClass('selected');
        }),
            $input, $select;

        $input = $('<input/>').attr('placeholder', 'Enter Attribute Name').attr('type', 'text');
        $('<td/>').append($input).appendTo($tr);

        $select = $('<select/>');
        $('<option/>').attr('value', 'DOUBLE').text('DOUBLE').appendTo($select);
        $('<option/>').attr('value', 'INT').text('INT').appendTo($select);
        $('<option/>').attr('value', 'STRING').text('STRING').appendTo($select);
        $('<td/>').append($select).appendTo($tr);
        $tr.appendTo($('table'));
    });

    $('#delete').click(function() {
        $.each($('tr.selected'), function() {
            $(this).fadeOut(function() {
                $(this).remove();
            });
        });
    });


    $('#moveup').click(function() {
        var selected = $('tr.selected');
        selected.insertBefore(selected.prev());
    });

    $('#movedown').click(function() {
        var selected = $('tr.selected');
        selected.insertAfter(selected.next());

    });
    
    $('#get').click(function() {

        console.log($('tr').map(function() {
            return {
                'name': $('input', this).val(),
                'type': $('select', this).val()
            };
        }).get());
    });

});