I need to say that I am not strong at Javascript nor jQuery. So my questions may be novice. I have something like followings:

1. <div id="droppable">
2.       <table>
4.             <thead> 
5.             <tr>
6. <th class="span-2">Column 1</th> 
7. <th class="span-1">Column 2</th>
8. <th class="span-1">Column 3</th>
9.       </tr>
10.   </thead> 
11.         <tbody> 
12. <tr>
13. <td class="span-2">...</td>
14. <td class="span-1">...</td>
15. <td class="span-1">...</td>
16. </tr>
17. </tbody>      
18.        </table>
 </div>

and 

2. <script type="text/javascript"> 
3. $(document).ready(function () {
4. var itemName = document.getElementById("name").value;
5.     var options = {
6.         caption:    false,
7.         navigation: 'hover',
8.         direction:  'right'
9.     }
10.  ...
11.     $("#droppable").droppable({
12.      tolerance:'touch',   
13.        drop: function() { 
14.        $(this).append("<tr><td class='span-2'>").append("new item").append("</td><td class='span-1'>").append("1").append("</td><td class='span-1'>").append("10.00").append("</td></tr>"); 
15.        }
16.     });
17. });
18. </script> 

I get all data in the droppable box and it functions as designed. The data format is not correct, however. I think it is caused by an incorrect selector. I believe that path shall be "table tbody", but just can't put it right.

And what is a right way to refer a string on the same page? I try to get a string in the element ID "name", but append(document.getElementById("name").value) inside of the drop: function() yields a blank.

Also, how to invoke a URL like /somethings/doSomething inside of the drop: function()? I need to call a server function when something is dropped into the droppable box.

Thanks for your inputs in advance.