JQuery ajouter supprimer la table de ligne d'un autre

Question

J'ai deux tables avec les ID FIRST et SECOND.

<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> 

Mon but est quand je clique sur Ajouter le lien, la ligne se déplace de table2 à table1 avec Ajouter le lien Supprimer devenir lien, modifier l'ordre Table1 et Table2. Lorsque je clique sur Supprimer le lien sur la table 1, la ligne passera de la table1 à la table 2, réordonnera la table1 et la table2.

Comment puis-je l'implémenter en utilisant JQuery?

Answer 1

Cela fera pour vous:

$(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/

Pour trier la table, utilisez quelque chose comme: http://tablesorter.com/docs/