Swap Divs onmouseover of table rows...

Question

I'm looking for a way that I can swap between divs when I hover over table rows and the only solution I've found is that effect when hovering over a list. I really don't understand jquery fully yet so I'm hoping its just a simple change that can be made.

This is the code that I came across for hovering over a list, the only change that I want is for the list to be a table.

script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#switches li").mouseover(function () {
        var $this = $(this);
        $("#slides div").hide();
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
</script>

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

Answer 1

Check this example out on jsFiddle: http://jsfiddle.net/5pNSN/

I just posted your code and switched the ul to a table and the li's to a tr (and also added td's for table data). Is that what you meant?

Answer 2

You'll have to make a number of changes to the sample you provided to get it working for your code (which we haven't seen yet).

First, this call: $("#switches li") is the one that finds the LI elements. You'll probably want something like $('#myTable tbody tr td') on your side of things.

var $this = $(this); creates a reference to each individual TD that's being bound.

$("#slides div").hide(); hides all the available pop-up divs. This could probably be written better like so: $("#slides div:visible").hide();.

Next, we're making a div show up that's somehow linked with each td. That's where this call comes in: $this.attr("id").replace(/switch/, ""). That's changing the selector to a specific tool tip or pop-up. Later on that line we show the div.

The last few lines adjust the CSS Properties of the LI's to correspond with what currently has the mouse over it.

Hopefully that helps.

Answer 3

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

the only change that I want is for the list to be a table.

Why would you want to put slides into a table, when slides aren't tabular data anyways?

The real way to go would be to put the DIVS in the list

<ul id="slides">
  <li id="one" class='slide'><div>Well well.</div></li>
  <li id="two" class='slide'><div>Well well.</div></li>
  <li id="three" class='slide'><div>Well well.</div></li>
  <li id="four" class='slide'><div>Well well.</div></li>
</ul>

This way, you can set the CSS for #slides .slide div to whatever you want them to be. And then, set the CSS for #slides .slide li to float:left.

Answer 4

I agree with g.d.d.c.

When adding the table to your code instead of the list you'llhave to watch out, to assing the correct switch-ids to the td elements:

<table id=myTable>
  <tr>
    <td id=switch1>foo</td>
    <td id=switch2>bar</td>
[...]
  </tr>
</table>