jQuery分离并重新固定

Question

我一直在开发一种基于代表行位置的输入值对行进行排序的方法。我能够自动组织输入值。

但是现在，当用户更改其位置值时，我需要分离一行并将其重新添加到表中的新位置。

我的下面脚本分离了，但是我找不到将其重新附加到表上的方法。

$('#add-widget').on('click', function(e){
    e.preventDefault();

    var n = ($('#widgets tr').length - 0) + 1;
    var tr =
         '<tr id="'+n+'">' +
             '<td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="'+n+'"></td>' +
             '<td><input type="text" class="form-control" id="description" name="description[]" placeholder="Description"></td>'+
             '<td>' +
             '<select id="type" name="type[]" class="form-control" required>' +
                '<option value="header">Header</option>' +
                '<option value="row">Row</option>' +
             '</select></td>'+
             '<td style="vertical-align:middle"><a data-delete-link="'+n+'" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="fa fa-trash-o"></i> Remover </a></td>'+
         '</tr>';
    $('#widgets').append(tr);
});

$(document).on('focusin', '#position', function(){
    $(this).data('val', $(this).val());
});

$(document).on('change', '#position', function(){
    var oldPosition = $(this).data('val');
    var newPosition = $(this).val();
    var id = $(this).closest('tr').attr('id');
    $('table > tbody > tr').each(function() {
        if(this.id !== id) {
            if(newPosition > oldPosition) {
                if (parseInt(this.id) <= newPosition &&  parseInt(this.id) > oldPosition) {
                    this.id = parseInt(this.id) - 1;
                    $(this).find(":text").eq(0).val(this.id);
                    $(this).children(':last').find("a").attr('data-delete-link', this.id);
                    //Below code not work
                    $(this).detach().insertAfter($('table > tbody > tr').get((parseInt(this.id) - 1))); 
                }
            } else {
                if (parseInt(this.id) >= newPosition &&  parseInt(this.id) < oldPosition) {
                    this.id = parseInt(this.id) + 1;
                    $(this).find(":text").eq(0).val(this.id);
                    $(this).children(':last').find("a").attr('data-delete-link', this.id);
                    //Below code not work
                    $(this).detach().insertAfter($('table > tbody > tr').get((parseInt(this.id) - 1)));
                }
            }
        } else {
            this.id = newPosition;
            $(this).find(":text").eq(0).val(this.id);
            $(this).children(':last').find("a").attr('data-delete-link', this.id);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12">
    <h4>Widgets <button type="button" id="add-widget">Add</button></h4>
</div>

<table id="datatable-widgets" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Position</th>
        <th>Description</th>
        <th>Type</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody id="widgets"> </tbody>
</table>

有人可以帮我这个片段吗？