Show/Hide Hidden Rows onMouseOver/onMouseOut with repeating table

Novice Question - Do I need multiple JS code for each repeat region and ID?

[FatLarry]

Still getting to grips with web design, but I'm sure I can crack this with a good pointer from somebody...

I have a table summarising product information (product reference, product dimensions, etc) which is populated from a MySQL database (each table filtered by category ID). The rows in the tables are created using Dreamweaver repeat regions. Each product reference is a hyperlink to a detailed product page.

This works fine, but I want to include an image and short summary description for each product listing which 'drops down' only when the user places mouse over the product reference link, i.e. the summary description row for each product remains hidden until mouseover on link (then dissapears onmouseout).

I understand that JS can do this and have seen a number of examples based on a single hidden row of text. Would I need to give each hidden summary description row a unique ID (say the product ID) in order to use the getElementByID function to work, and If so would I need to incorporate the relevant snippet of JS code that toggles the hide/show behaviour within each hidden table row ?

I suppose it wouldn't be difficult to implement seperate IDs and JS code for each hidden row as they are dynamic repeat regions, but wouldn't this result in a lot of code (some category tables may have up to 30 product rows in them)?

Any suggestions / comments / examples much appreciated.

Thanks

[edited by: FatLarry at 12:45 am (utc) on June 30, 2009]

[broniusm]

FatLarry-
You can have the object raising the event pass itself to the event handler in a number of different ways. For a simple example:

<script type="text/javascript">
function showHideNext(obj) {
 alert(obj.innerHTML);
}
</script>
...
<tr onMouseOver="showHideNext(this)"><th>header row</th></tr>
<tr><td>content row</td></tr>
...

So once you've demonstrated that you can receive that object by reference, you could actually walk the DOM and pick up the next row to show/hide.

Save yourself some heartache, though, and look into javascript libraries like prototype or jQuery. I recommend the latter, bc it had the better reviews (if not still less popular) and is the one I have the most experience with. Libraries such as these will help you pick any object in the DOM using css-like paths and will give you smooth show/hide effects out of the box.

[FatLarry]

Thanks for the reply broniusm.

I must admit that I really am a beginner and most of what you said was a bit over my head, but I will look into your suggestions (esp the jQuery) and no doubt I'll understand it all given a bit of time.

By way of simplified example, the following code (copied from another article/tutorial) is what I'm trying to achieve...

<table>
<tr>
<td>
<a href="#" onMouseover="document.getElementById ('linkID_1').style.display='block';" onMouseout="document.getElementById('linkID_1').style.display='none';">Product 1 web page link
</a></td>
</tr>
<tbody id="linkID_1" style="display:none;">
<tr>
<td>
This table row displays the summary product information and is hidden until mouseover product link above (this row will also include a small image of product)
</td>
</tr>
</tbody>
</table>

...whilst this method appears to work for a single hidden table row, I have problems when trying to build up the table to include more than one visible & hidden row, e.g....

<table>
<tr>
<td>
<a href="#" onMouseover="document.getElementById('linkID_1').style.display='block';" onMouseout="document.getElementById('linkID_1').style.display='none';">Product 1 web page link
</a></td>
</tr>
<tbody id="linkID_1" style="display:none;">
<tr>
<td>
This table row displays the summary product information and is hidden until mouseover product link above (this row will also include a small image of product)
</td>
</tr>

<tr>
<td>
<a href="#" onMouseover="document.getElementById('linkID_2').style.display='block';" onMouseout="document.getElementById('linkID_2').style.display='none';">Product 2 web page link
</a></td>
</tr>
<tbody id="linkID_2" style="display:none;">
<tr>
<td>
This table row displays the hidden summary product information for product 2
</td>
</tr>
</tbody>
</table>

...The problem with 2nd example is that the Product 2 hyperlink remains hidden along with the corresponding hidden row for this product !?

I'm sure I'm missing something pretty obvious - can any body give me a clue.

Thanks

[edited by: FatLarry at 3:39 pm (utc) on June 30, 2009]

[broniusm]

Oh ok. I was understanding that you were going for efficiency and didn't want to register and reference every single instance of linkID_n throughout.

I think the issue is that you are trying to make multiple tbody elements in a single table. Instead of tbody, just nest a new table into a new tr/td below. Something like:

<table>
<tr><th>Product link 1</th></tr>
<tr><td><table id="linkID_1" style="display:none;"><tr><td>product 1 details..</td></tr></table></td></tr>
<tr><th>Product link 2</th></tr>
<tr><td><table id="linkID_2" style="display:none;"><tr><td>product 2 details..</td></tr></table></td></tr>
...
</table>

You don't need to use th's, but why not :D Also, the id="linkID_2" style="display:none;" could possibly go right on the TR containing that nested table, but I don't know whether that will work in FF as well as IE.

Finally, to save street-cred, this is by far not the best way to do it, but it will get the job done ;) Some suggestions would be to pepper with classes and use css for initial display:none. Or better, use javascript to hide all at load so that this solution would work in non-js enabled browsers.