moving a row from one table to another using jquery

Question

I followed the question previously posted here

I need to do pretty much same, i.e. I have an add button on each row and on add image click I want to move that row to another table, except that when I move my row, the target table has only one column common to the source table (source table has one more extra column which I dont have in the target table) and I need to add a column with a delete button image for every row moved into the target table. Right now able to delete the row from the source using the following code:

$(document).ready(function () {
    $('#table_source td img.move_row').click(function () {
        $(this).parent().parent().parent().remove();
    });
});

Second part needed is when I click the delete image button in the target table the row should move back to the original table

Thanks in advance,

Priyank

Answer 1

HTML

<table id="table_source">
    <tbody>
        <tr>
            <td>Row</td>
            <td>1</td>
            <td><img src='move_image_path' alt='Move' class='move-row' /></td>
        </tr>
        <tr>
            <td>Another Row</td>
            <td>2</td>
            <td><img src='move_image_path' alt='Move' class='move-row' /></td>
        </tr>
    </tbody>
</table>

<table id="table_dest">
    <tbody>
    </tbody>
</table>

JS

$(document).ready(function() {
    $("#table_source img.move-row").live("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "remove_image_path.jpg")
            .attr("alt", "Remove");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest img.move-row").live("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "move_image_path.jpg")
            .attr("alt", "Move");
        $("#table_source tbody").append(tr);
    });
});

Answer 2

Tried above suggestion with recent jquery lib (2.1.4) and it doesn't work properly, I was able to move the row only once (either direction). I had to enhance it a bit, but now it works. If anybody is interested here is the code:

$(document).ready(function() {
    $("#table_source").on("click","img.move-row", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "remove_image_path.jpg")
            .attr("alt", "Remove");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest").on("click"," img.move-row", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "move_image_path.jpg")
            .attr("alt", "Move");
        $("#table_source tbody").append(tr);
    });
});