JQuery从另一个添加删除行表

时间:2010-07-20 15:59:48

标签: jquery html-table row

我有两张名为FIRST和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>

我的目标是当我单击添加链接时,该行将从table2移动到table1,Add链接变为Delete链接,重新排序table1和table2。 当我单击table1上的Delete链接时,该行将从table1移动到表2,重新排序table1和table2。

如何使用JQuery实现它?

1 个答案:

答案 0 :(得分:7)

这将为您做到这一点:

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

要对表格进行排序,请使用以下内容: http://tablesorter.com/docs/