Moving table row back and forth between 2 tables

Question

0.00/5 (No votes)

See more:

I have this code below that allows me to move values from the Random Fruits Table to the Green Fruits Table by click on the row value. And the code is also able to move back the value i moved from Random Fruits Table back to the Green Fruits Table. The problem is that the code is only able to only execute this process once but i want it to be able to execute the process unlimited times is there any simple way to accomplish this any help would be greatly appreciated thanks!

What I have tried:

Here is my JSFiddle[^]

Posted 12-Jun-18 22:33pm

Member 13863747

Updated 12-Jun-18 23:25pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chirag Sudra · Accepted Answer · 2018-06-12T23:27:00

Solution 1

Hi,

On click of row in Random Fruit table, you are appending new to Green Fruit table but your Jquery listens to event only for element which where created at time of page load. So you to change your script slightly to

JavaScript

function listener(obj) {
   $(document).ready(function() {
     $(document).on("click","#fruityid td",function() {
   ... Rest of code goes here
});
});

By using $(document).on("click","element",function(){}), elements are re-initialized on click or other events.

Posted 12-Jun-18 23:27pm

Chirag Sudra

Comments

Member 13863747 13-Jun-18 5:52am

Thanks Chirag Sudra that worked but do you know why when ever i repeat the process of move the value back and forth there is blank spaces in between the row?

Chirag Sudra 13-Jun-18 6:00am

On $('body').on('click', '.new-green-fruit',)

you are using .detach() but this is just applied on text not on the whole row

try this

$('body').on('click', 'td.new-green-fruit', function() {
   data2 = this.innerHTML;
   k2 = Object.keys(obj).find(k => obj[k].indexOf(data2) >= 0)
   index2 = obj[k2].indexOf(data2);
   obj[k2].splice(index2, 1);
   obj2[key3].push(data2);
$(this).parent().detach();
    var element2 = $(this).detach();
    $('#fruityid > tbody').append('<tr><td>' + element2.html() + '</td></tr>');
	});

In above I'm 1st detach the element from Green fruit table and rest code is same

Member 13863747 13-Jun-18 6:07am

Wow thanks that worked really appreciate it!