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

Something to keep in mind when making a selector is to be only as specific as required. For example, do you have img.move_row which are inside #table_source but yet not in a td? If not, why include it? $('#table_source img.move_row') would be it's exact equivalent. And if you're down to that, then $('#table_source').find('img.move_row') will be quicker still. — Sinetheta, Dec 10 '11 at 07:13

score 15 · Accepted Answer · answered Dec 10 '11 at 06:30

15

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);
    });
});

answered Dec 10 '11 at 06:30

Phil Klein

7,344
3
30
33

Hi.. just looking at the code, I also want to remove one of the columns, i.e. a td from the tr..before adding it into the target table. And for the new delete image do I just change the src field for the target tr like .attr("src", "new_delete_img_path.jpg") – pri_dev Dec 10 '11 at 06:42
Yep, simply update the src attribute. As far as removing a td, you could use the find method on the clone and call remove. You'd have too add it a well on the remove case. – Phil Klein Dec 10 '11 at 06:46
2

`.live()` is deprecated as of jQuery 1.7. Swap it out for the equally useful `.on()` and you're golden. You can PROBABLY find a suitable listener on the page other than `document`, (a wrapper div if nothing else!) but worst case scenario, binding to the document will be feature-identical to using `.live()`. – Greg Pettit Dec 10 '11 at 07:03
I am getting error saying, .on() is not a function .. and live is not working as specified, can just use like a click on that... also one last thing is how do I remove a particular td (with say col index =2) from a tr before appending it to the target? – pri_dev Dec 10 '11 at 08:41
the part 1 works ... removing from source and appending to target, but part 2 isnt working, clicking remove img in target doesnt move the row back to source table.. – pri_dev Dec 10 '11 at 08:55
1

I changed the js to use the .click event like $("#table_role img.move-row").click( function() {... – pri_dev Dec 10 '11 at 09:01
1

Click won't work because you're creating new elements on the DOM. As mentioned above, `.on()` and `.live()` should work. I just chose to use `.live()` since it's more likely to work when people are using older versions of jQuery. It is true however that the use of `.on()` represents a much better and more future-proof solution. – Phil Klein Dec 10 '11 at 14:55
Here's a link to a working solution (again with `.live()` rather than `.on()`) that you can take a look at: http://jsfiddle.net/3JnbY/ – Phil Klein Dec 10 '11 at 14:58
Thanks.. this really works smoothly with live..do you have an example on copying the entire contents of the table to another table on next page with new text input fields being added as new columns to each row, something on these lines.. – pri_dev Dec 10 '11 at 17:58

Radosław Jakubowski · Answer 2 · 2016-03-14T12:17:16.763

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);
    });
});

In pure JS, that would be something like: `dstTbl.tBodies[0].appendChild(srcTbl.tBodies[0].rows[0])`. — David R Tribble, Jan 27 '17 at 20:13

score 1 · Answer 3 · answered Jan 10 '20 at 14:14

Here is a code snippet that you can play with that has some working jquery to see how Phil's answer works. His answer was helpful for me to implement something similar, just adding a snippet in case it is helpful to someone.

$(document).ready(function() {
    $("#table_source .move-row").on("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find(".move-row").text("-");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest .move-row").on("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find(".move-row").text("+");
        $("#table_source tbody").append(tr);
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>1st Table:</h3>
<table class="table" id="table_source">
    <tbody>
        <tr>
            <td>Row</td>
            <td>1</td>
            <td><a href="#/" class='move-row'>+</a></td>
        </tr>
        <tr>
            <td>Another Row</td>
            <td>2</td>
            <td><a href="#/" class='move-row'>+</a></td>
        </tr>
    </tbody>
</table>

<h3>2nd Table:</h3>
<table class="table" id="table_dest">
    <tbody>
      <tr>
          <td>Row</td>
          <td>1</td>
          <td><a href="#/" class='move-row'>-</a></td>
      </tr>
    </tbody>
</table>

moving a row from one table to another using jquery

3 Answers3