Question

i have 2 tables, i want to add rows from one table to another, based on the rows selected using checkbox, its adding rows from one table to another table, but its not adding according to rows, but based on cells, here is what i am using:
when the button is clicked, it loops through all the rows which are checked and removes the first cell which is checkbox and adding rest of the cell wrapped in a row to next table, i assume it would wrap the resulting cells into the row, but thats not the case, because when i select multiple rows, it appends directly at the end of last rows last cell.

$("#btnAddStories").click(function () {
            $checkedStories = $("#dnn_TopStories_grdTopStoriesSearch input[type=checkbox]:checked");
            $.each($checkedStories, function (index, item) {
                $row = $(this).closest("tr").clone().find("td:not('.firstCell')").remove();
                $('#tblTopstories tbody').append($row);
            });
        });

Answer 1

Changing answer completely as my previous answer didn’t actually answer your question!

the problem is that when you set $row, you’re only calling the cells from that row, this happens when you do the .find()

in order to make it work properly, you’d need to change your append to this:

$('#tblTopstories tbody').append($('<tr/>', {html: $row});

What that does is it creates a <tr></tr> and sets the html content to the content of the $row

For clarity of your code, I’d change the name of $row to $cells but that’s just personal preference.

Also, potential problems arise when you click the #btnAddStories element, so I would change the .click() to .on('click') and add an .off('click') to the start to prevent ghost clicks. (sometimes the event will fire once on your first click, twice on your second etc, calling .off() before an event is assigned prevents the event handler from being applied multiple times, [this usually when the event handler is assigned inside a function])

$("#btnAddStories").off('click').on('click', function(){
  ...
})