JQuery add delete row table from another

Question

I have two tables with FIRST and SECOND id.

<TABLE ID="FIRST">
<TR>
<TD></TD>
<TD></TD>
<TD></TD
</TR>
</TABLE>

<TABLE ID="SECOND"> 
<TR>
<TD>1</TD>
<TD>First Value</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
<TR>
<TD>2</TD>
<TD>Second Value</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
<TR>
<TD>...</TD>
<TD>...</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
</TABLE>

My goal is when I click Add link, the row will move from table2 to table1 with Add link become Delete link, reorder table1 and table2. When I click Delete link on table1, the row will move from table1 to table 2,, reorder table1 and table2.

How can I implement it using JQuery?

+1 @womp - We need to see what you've done first.

JasCav
– JasCav

2010-07-20 16:03:07 +00:00
Commented Jul 20, 2010 at 16:03 — JasCav
– JasCav, Commented Jul 20, 2010 at 16:03

Peter Örneholm · Accepted Answer · 2010-07-20 16:19:53Z

7

This will do that for you:

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row)
           .appendTo(targetTable)
           .find("A")
               .text(newLinkText);
   }

   $("#FIRST A").live("click", function(){
       moveRow($(this).parents("tr"), $("#SECOND"), "Add");
   });

   $("#SECOND A").live("click", function(){
       moveRow($(this).parents("tr"), $("#FIRST"), "Delete");
   });
});

http://jsfiddle.net/UxRVa/1/

To sort the table, use something like: http://tablesorter.com/docs/

answered Jul 20, 2010 at 16:19

Peter Örneholm

2,85820 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery add delete row table from another

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related