Swap Divs onmouseover of table rows

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").mouseo开发者_开发知识库ver(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>

---

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.

---

<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.

---

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>

---

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

Sure, that is an easy change.

HTML:

<table id="switches">
  <tr id="switch1" style="font-weight: bold;">
      <td>First slide</td>
  </tr>
  <tr id="switch2">
      <td>Second slide</td>
  </tr>
  <tr id="switch3">
      <td>Third slide</td>
  </tr>
  <tr id="switch4">
      <td>Fourth slide</td>
  </tr>
</table>
<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>

JavaScript:

// find the element with id 'switches', and then select every tr (table row) inside it
$("#switches tr")
    // apply a function to each tablerow's mouseover event
    .mouseover(function () {
        // create a variable called '$this'
        var $this = $(this);
        // find the element with id 'slides', and then select every div inside it
        // then, hide those divs
        $("#slides div").hide();
        // find the div with id corresponding to
        // 'slide' + the suffix of the 'id' of the current table row
        // (the one we moused-over)
        // and make it visible (show)
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        // finally, set all table rows to plaintext font weight
        $("#switches tr").css("font-weight", "normal");
        // and set the current table row to a bold font weight
        $this.css("font-weight", "bold");
});

If you want a working example, check out on jsFiddle: http://jsfiddle.net/5pNSN/