I have two tables that I am trying to move rows between - searchResultsTable and selectedCustomersTable. It is a pretty simple task - just be able to move rows back/forth between the two tables continuously.

I move multiple rows from searchResultsTable into the selectedCustomersTable and vice versa. So the user can continuously move rows back/forth between the two tables using the add and remove buttons.

The add button is when the searchResultsTable has selected rows and you want to move those to the selectedCustomersTable. That works.

The remove button is for selecting rows in the selectedCustomersTable and removing them / moving them back into the searchResultsTable. That doesn't seem to be working. After moving rows back/forth a few times, it seems like the events are lost and it just quits working. I am trying to use the .on event thing in jquery 1.7 but am having no luck. The "move rows between two tables" functionality will not work over and over again. It is like it works one time, then it will not work over and over again.

Here is my jQuery code - can someone see what the matter is and offer a way to get this to work over and over again? Over and over again - meaning - moving rows back/forth between two tables forever if the user desired to do so.

<script type="text/javascript">
    $(function () {
        $('#searchResultsTable').on('click', function (e) {
            bindTableEvents();
        });
        $('#selectedCustomersTable').on('click', function (e) {
            bindTableEvents();
        });

        bindTableEvents();


        function bindTableEvents() {
            var $t1 = $('#searchResultsTable');
            var $t2 = $('#selectedCustomersTable');
            alert('in');
            setupTable($t2);
            setupTable($t1);
        }

        function setupTable($table) {
            $table.initializeTable({
                navigate: {
                    control: { keyboard: true, mouse: true },
                    select: { multiple: true }
                }
            });

            $table.on('mouse', function (e, event) {
                if (event.which == 1 && !event.ctrlKey && !event.shiftKey) {
                    var $selected = $table.selected();
                    if ($selected.length == 1) {
                        !$selected.hasClass('active');
                    }
                }
            });

            $table.on('keyboard', function (e, event) {
                var $selected = $table.selected();
                switch (event.which) {
                    case 13:
                        //ENTER
                        if ($selected.length == 1) {
                            !$selected.hasClass('active');
                        }
                        if ($selected.length > 0) {

                        }
                        break;
                    case 46:
                        //DELETE
                        if ($selected.length > 0) {

                        }
                        break;
                }
            });
        }

        $('#addButton').click(function () {
            var selectedRows = $('#searchResultsTable').selected();
            $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove());
        });

$('#removeButton').click(function () {
            var selectedRows = $('#selectedCustomersTable').selected();
            $('#searchResultsTable').append(selectedRows.removeClass('focus').remove());
            });

    });
</script>

• jquery
• events
• append
• row

I struggled with this issue, too. But I was looking for moving this rows directly. Here's my solution:

$(document).ready(function() {
    $("#searchResultsTable tbody").on("click","tr", function() {
        var tr = $(this).closest("tr").remove().clone();
    $("#selectedCustomersTable tbody").append(tr);
    });
    $('#selectedCustomersTable table tbody').on("click","tr", function() {
            var tr = $(this).closest("tr").remove().clone();
            $("#searchResultsTable tbody").append(tr);
    }); 
});

The point here is to bind the event handling on the tbody, which handles the clicks on the table row. So the new HTML elements inserted into the second table keep the function of moving back, as the tbody hadles the event.