append

append

Hi.

I have two HTML tables, one with five td elements and another empty. I want to append an element from the fist table on the second table and delete it from the first table.

So here is code:

  2. <html> 
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  8. });
  9. </script>
  10. </head>  
  12. <body> 
  13. <script>
  14. $(document).ready(function(){
  15. var numElems = $('#data-source td').length;
  16. console.log("Before deleting there are " + numElems + " elements in the original collection");
  18. //I try to append one element to the second table and remove it from the first table
  19. $('#data-source:nth-child(1)').append('#new_table'); // DOESN'T WORK!
  20. $('#data-source td:nth-child(1)').remove(); // Yeah! It works!
  21. var numElems = $('#data-source td').length;
  22. console.log("After deleting there are " + numElems + " elements in the original collection");
  24. //Verification of thing's that doesn't work
  25. var numElems2 = $('#new_table td').length;
  26. console.log("There are " +numElems2+ " elements in the new collection");
  27. $('#new_table').css('display', 'block');
  28. });
  29. </script>
  31. <table id="data-source" align="center">
  32. <tr>
  33. <td>First element.</td>
  34. <td>Second element.</td>
  35. <td>Third element.</td>
  36. <td>Fourth element.</td>
  37. <td>Fifth element.</td>
  38. </tr>
  39. </table>
  40. <table id="new_table" align="center"></table>

  42. </body> 
  44.  </html> 
    My problem is in line 19.

    Can anyone help me? Any idea?

    Thank you very much.