Playing with Jquery, I need to add and table inside another existing table, and after some fight with the code, I realized that the “trick” would be add the content of the remote table, inside a TD.

So here are the steps :

1. make the TD hidden, because we don’t want an empty TD taking space in the table. use style=”display: none;” in the TD definition.

2. create an external file that will be inserted in the TD, I called it mytable.html.

3. identify the TD so we can manipulate it by it’s ID, for example something like : id=”data_item”

4. add the links to insert the data in the TD

<a href=”javascript:addData();”>show</a>
<a href=”javascript:hideData();”>hide</a>

errrr, why to first make the call and then create the code itself ? I don’t know you can change the other if this bugs your brain… hehehe.

5. create the code to load the data and hide it.

<script>
function addData(){
$(‘#data_item’).load(‘mytable.html’);
$(‘#data_item’).show();
}

function hideData(){
$(‘#data_item’).hide();
}
</script>

6. dont forget to include the jquery library in your page:

<script src=”jquery-1.2.6.js”></script>

Now that you followed the steps and didn’t work, lets go step by step in the jquery code

this snipet of code $(‘#data_item’) selects the elements that have the id=data_item, to selec elements by the class would be something like $(‘.data_item’) but in this case we want to deal with only one item, that has the ID=data_item, so we use the # in the string selector.

the function load() is used to make a remote call to an URL and load, as the name says, the content of the URL in the selected element, it could be a DIV, a SPAN, All the content of a table, but in this case we are loading in a TD.

Ok, you followed the steps, read the step by step, and still not working …go ahead and grab the SOURCE, for your convenience the jquery version that I used is inside the sample.

be happy.