Cloning between 2 tables

by Akram kamal

HTML

<table class="tables_ui">
    <caption>
         <h4>Existing names</h4>

    </caption>
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody id="sortable1">
        <tr>
            <td>S03</td>
            <td>Name3</td>
            <td>ID4</td>
        </tr>
        <tr>
            <td>S01</td>
            <td>Name1</td>
            <td>ID2</td>
        </tr>
        <tr>
            <td>S02</td>
            <td>Name2</td>
            <td>ID6</td>
        </tr>
    </tbody>
</table>
<table class="tables_ui">
    <caption>
         <h4>When names are arranged in order to create a sequence, enter the time to the previous name in minutes. Then click OK.</h4>

    </caption>
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>ID</th>
            <th>Time in minutes to previous name</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody id="sortable2" class="connectedSortable">
        <tr id='initial'>
            <td colspan='5' style='width: 300px;'>Drop and rearrange names here</td>
        </tr>
    </tbody>
</table>
<form>
    <input type='submit' value='OK' onclick='dorows();' />
</form>

CSS

.tables_ui {
    display:inline-block;
    margin:2px 2%;
    border:2px solid #3333fe;
    border-spacing:0;
}
.tables_ui ul li {
    min-width: 200px;
}
.dragging li.ui-state-hover {
    min-width: 240px;
}
.dragging .ui-state-hover a {
    color:green !important;
    font-weight: bold;
}
.tables_ui th, td {
    text-align: left;
    padding: 2px 4px;
    border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
    cursor: move;
}
.connectedSortable tr:first-child {
    cursor: default;
}
.ui-sortable-placeholder {
    background: yellow;
}
.ui-layout-center {
    width: 400px;
    height: 300px;
    border: 1px solid black;
}
.ui-state-hover {
    background-color: #f9ffff;
}

JavaScript

function dorows() {
    $('#sortable2').find('tr').each(function (index) {
        if (index > 0) {
            $('#sortable2 tr').eq(index).find('td').eq(5).remove(); //Remove data column if exists
            var valID = $('#sortable2 tr').eq(index).find('td').eq(2).html();
            var valNext = $('#sortable2 tr').eq(index).find('input').val();
            $(this).append("<td><input style='cursor: default;' name='namedata' value='" + index + '~' + valID + '~' + valNext + "' /></td>");
        }
    });
}

$(document).ready(function () {
    $("#sortable1").sortable({
        connectWith: ".connectedSortable",
        helper: function (e, tr) {
            this.copyHelper = tr.clone().insertAfter(tr);
            $(this).data('copied', false);
            $(this).find('tr').each(function (index) {});
            tr.append("<td><input style='cursor: default;' value='0' /></td>");
            tr.append("<td><a style='cursor: default;' onclick='deleterow($(this));'>Delete</a></td>");
            return tr.clone();
        },
        stop: function (e, ui) {
            if (ui.item.closest("tbody").attr("id") === "sortable1") ui.item.children().slice(-2).remove()
            var copied = $(this).data('copied');
            if (copied) {
                $('#initial').remove(); //Remove initial row
            }
            if (!copied) {
                this.copyHelper.remove();
            }
            this.copyHelper = null;
        }
    });

    $("#sortable2").sortable({
        receive: function (e, ui) {
            ui.sender.data('copied', true);
        }
    });

    //To add order number of rows as text
    $("#sortable2").sortable({ //Only done when table2 is reearranged
        stop: function (event, ui) {
            $(this).find('tr').each(function (index) {});
        }
    });

    $('form').on('submit', function (e) {
        e.preventDefault();
    });

});

function deleterow(row) {
    row.closest('tr').remove();
}