New to jqeury: question how to add an autofilter row to a page in an iframe?

New to jqeury: question how to add an autofilter row to a page in an iframe?

Hi there,
 
This might be better in the "using" forum, but this is my first turn at java scripting, with jquery in particular.  I've the book "Jquery Novice To Ninja" and a general HTML/CSS/JS book as well (teaching myself to create better web pages at work).
 
What I'm doing:   I have a web page (not on a server, I call the .htm direct) and inside of this is an iframe.  When I click on a menu items in my main web page, various different web pages come up in the iframe.  These are ones I've created myself either directly or via JMP (letting Jump create a web page from data I worked on through a script).  
 
My problem: The web pages generated by JMP include basic tables and I want to add a row under the table headers (or any other way) and put in auto-filters for each column.  The JMP generated HTML has no JS or CSS lines included, so I am trying to do this from my main web page when I click on a link (each hyperlink would generally opens a slightly different web page and I have a quite a few hyperlinks).
 
Below is the code that I know works (from one of the forums on this site, thanks!) which at least works to let me change the header row in the table on a page I load inside the iframe.  I did that as a test to learn the basics of changing an iframe from a main web page (again, thanks!):
 
Notes:
1)   "my_jsl" is the id I gave to my anchor for this menu option.  I have a number of them and it seemed to be the only way to make sure that my "onclick" works driectly on this one
2)  "myiframe" is the name of the only iframe I am using
3)  "my_jsl.htm" is just the JMP generated html page with my table which is in the same directory structure as my main web page
4)  For some insane reason JMP creates a table by creating one table with one row, having 2 cells.  In the second cell, it creates another table with rows for the headers (th) and then each of the data rows.  So I just targeted "table th" as it's the only actual table with a 'th'.
5)  There are 13 columns to the table, and I'd need the autofilter for each col.
 
My lines in the main web page where I change the header row in the inline frame's table to blue
 
        <li>
               <a id="my_jsl" target="myiframe" href="jsl_web/my_jsl.htm">My JSL</a>     
               <script type="text/javascript">       
                      $('#my_jsl').click(function() {
                             var f=$('#myiframe')
                             f.load(function(){ 
                                 f.contents().find('table th').css( {'background-color': 'blue'}); 
                             })
                      }) 
         <      /script>
        </li>










So with the above, how would I use jquery to add in an autofilter under the headers?  I saw a different javascript toolbox do it when it was in another web page, and it looked something like this:
 
 
 
I'm sure jquery can do it, but I'm unsure of the coding or how to see exactly what adds in autofilters.  I have a bit of a grasp on the syntax and what the above lines are doing (not 100%) and thought someone could point me in the right direction?
 
Thanks!