Switch Content with tables

[kalkalash]

1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem: I have been trying to get this script work with tables. I have lost count of the number of hours I've spent on it already. I am no expert, but I thought I had a grasp of how this works. I guess I was wrong...lol! This will ultimately become a gaming leaderboard. The first section is just the table headers, the 2nd section will be for the player, and the switchable content section will be that players stats for a few days.

This is what I've got...please help point out where I am going wrong and if at all possible, post a sample of this working with tables. Thanks!



<table border="0" width="100%" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">Global<br>Score</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">Career<br>Score</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">Team<br>Score</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">Cmdr<br>Score</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Accuracy</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>SPM</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">K/D<br>Ratio</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Kills</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Deaths</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00">Knife<br>Kills</font></td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Heals</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Revives</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Repairs</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFF00"><br>Supplies</td>
</tr>

<tr id="bobcontent1-title" class="handcursor">
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">26947</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">81691</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11719</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">3675</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">25.48</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.68</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.49</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11661</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">7835</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1174</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">425</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">695</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">266</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1047</td>
</tr>

<tr id="bobcontent1" class="switchgroup1">
<tr>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">26947</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">81691</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11719</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">3675</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">25.48</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.68</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.49</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11661</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">7835</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1174</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">425</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">695</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">266</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1047</td>
</tr>
<tr>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">26947</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">81691</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11719</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">3675</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">25.48</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.68</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1.49</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">11661</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">7835</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1174</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">425</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">695</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">266</td>
<td align="center"><font face="Tahoma" size="1" color="#FFFFFF">1047</td>
</tr>
</tr>
</table>

<script type="text/javascript">
var bobexample=new switchcontent("switchgroup1") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>

[jscheuer1]

You cannot use table rows that way with this script. You might be able to get a similar looking layout that worked using a table inside a single cell on each row and giving the contained table the class names required. It could also be worked out without tables. The bottom line is that a table row cannot be manipulated in this manner, at least not in all browsers. Also, as with any script, it is best to follow the markup examples given rather than to invent your own markup.

[kalkalash]

Got it working with table rows. Thanks. :D

[solary]

Could you post the code , as I am trying to use it in tables as well.

My goal is to have the collapsible dropdown show two <input> fields. Right now I know how to make it look nice using <td>...but that seems to break the script.