Question

I’m struggling a little with my current project, and hope someone can help clarify things for me.

I have a table where I need to perform actions based on a given row, with a jQueryUI button in the first td, which should drop down a menu with functions for the row. Each tr has values to identify both the person and item, but I don’t know how to dynamically create the dropdown to handle the specific items of the row.

For example, my tr looks like this:

<tr person="1" item="1"><td class="ddmenu">Row1</td>...</tr>
<tr person="2" item="5"><td class="ddmenu">Row2</td>...</tr>

My jQuery functions, which locate the person and item ids for the row, and drops down the menu:

$('.ddmenu')
.click(function() { 
var person = $(this).parents("tr").attr('person');
var item = $(this).parents("tr").attr('item');
$('.drop').toggle();
return false;
}) 

I have an intial item that lists the same items for each row, but have the following two problems:

1. How do I create the dynamic dropdown menu with the person and item values, so I can act upon each item with separate jQuery selectors.
2. How can I drop the menu directly below the specific button, rather than the location of the div in the html?

jsfiddle example: http://jsfiddle.net/CHrkd/3/

Any thoughts and clarification will be greatly appreciated! Thanks

Answer 1

I realized that I asked two unrelated questions, and want to answer the first. The easy method is to simply use global variables. Once the ‘ddmenu’ selector fires, save the person and item values to global variables for further processing. Easy peasy.

Now, if I can just figure out how to move the .drop class to line-up under the clicked item.