[jQuery] Design question.
I have a case that is going to prove to be processor intensive, so am
looking for suggestions on how to make the code as responsive as
possible. In addition, I'm a little stumped on how to resolve a problem
with my IDs.
I have a page that will list hundreds of people (I'm ignoring paging for
now, it's just not quite suitable). For each person there will be a
number of actionable items/links. Each of these links imply to do
something different, but all rely on the employee ID, These links will
also be embedded in sub-structures (divs/tables, etc.) So a sample of
one row might look something like this:
<tr>
<td>Bob Smith</td>
<td><div>link 1</div></td>
<td><table><tr><td>link2</td></tr></table</td>
</tr>
(this is very contrived to help illustrate the design issues... :)
Now the problem. If the first link (though it could be anywhere on the
row) were to trigger a Cluetip with details for that employee and item,
I'll need the employee ID, and supporting information (a date say, based
on what column it's in). In my current code I've done this:
<tr>
<td id="4">Bob Smith</td>
<td><div id="4" class="1-Jan-2008">link 1</div></td>
</tr>
Now this isn't valid HTML because the IDs are not unique. But, I need
the ID to do the needed processing. I can't just ask for the first
sibling's ID, because my "trigger" elements are embeded in other
structures. The content is dynamic, so it may or may not have the same
structure (it would be one of a small handful of possible structures)
each time - so I can't embed the structure (i.e.
.parents("tr").children("td:first") ). My reasoning here is that if I
put the target ID as close as possible to the trigger element, there is
less processing needed to get that ID - which is a large factor when
dealing with hundreds of rows on the page.
So, my question is what others are doing in this sort of situation.
I've tried various techniques, including building a JS object structure
with the pertinent data, but keep hitting a performance issue. Maybe I
need to embed an object on each of my trigger elements that contains the
needed data? Something like $("#trigger")[0].extraData = { id: 4 }; ?
But won't this run into run-away memory usage when I'm dealing with
potentially thousands of these triggers (multiple triggers for each
employee).
If it helps conceptually, think of a table with one employee per row,
and each of the remaining columns being a day. Each day needing a
trigger to show a Cluetip for what the employee is doing that day.
I do realize my definitions are kinda simplistic, but hopefully there is
enough there to get the issue across. For me to define the full picture
would need a book or three... :)
Thanks for any input.