Table change

NZ_Kiwis

I've got two html tables the same size but with different data in them.

when you click a link I want one table #1 to show click the next link and the other table will show.

Can someone help me with this code please

bpat1434

???

I'm stumped at what exactly you want.....

NZ_Kiwis

Sorry have a look at
http://www.airnz.co.nz/
It starts with "Flights" but when you click "Fligthta + Hotels" it has different content

bpat1434

Is that an example site, or is that your actual site? If it's your site, works fine. If not, something like this might help:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Switch Tables</title>

<script type="text/javascript" language="Javascript"><!-- // --><![CDATA[
function switchTabs(on, off, tabTitle)
{
	var tOn = document.getElementById(on+tabTitle);
	var tOff = document.getElementById(off+tabTitle);
	var dOn = document.getElementById(on);
	var dOff = document.getElementById(off);

	tOn.className = "selected";
	tOff.className = "deselected";
	dOn.style.display = '';
	dOff.style.display = 'none';
}
//]]></script>

<style type="text/css"><!--
#container
{
	width: 500px;
	height: 500px;
	position: absolute;
	top: 50%;
	margin-top: -250px;
	left: 50%;
	margin-left: -250px;

	padding: 0;
}

#tabs
{
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	margin: 0;
}

#table1_title,
#table2_title
{
	width: 240px;
	height: 20px;
	float: left;
	margin: 0 4px;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 5px 5px 0 0;
	border: 1px solid #000;
}

#table1,
#table2
{
	position: absolute;
	top: 22px;
	left: 0;
	width: 500px;
	height: 476px;
	margin: 0;
	padding: 0;

	background-color: #090;
	border: 1px solid #000;
}

#table2
{
	background-color: #900;
}

.selected
{
	background-color: #abd;
	border-bottom: 0;
}

.deselected
{
	background-color: #009;
	color: #000;
}
--></style>
</head>

<body>

<div id="container">

<div id="tabs">
	<div id="table1_title" class="selected">
		<a href="javascript:switchTabs('table1', 'table2', '_title');">Table 1</a>
	</div>
	<div id="table2_title" class="deselected">
		<a href="javascript:switchTabs('table2', 'table1', '_title');">Table 2</a>
	</div>
</div>

<div id="table1">
	<h3>This is table 1!!</h3>
	<table>
		<tr>
			<th>ID</th>
			<th>Product</th>
		</tr>
		<tr>
			<td>1760181</td>
			<td>Pencil</td>
		</tr>
	</table>
</div>

<div id="table2" style="display:none;">
	<h3>This is Table 2!!</h3>
	<table>
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr>
			<td>Joe</td>
			<td>54</td>
		</tr>
		<tr>
			<td>Jane</td>
			<td>21</td>
		</tr>
	</table>
</div>

</div>

</body>
</html>

It's quick, and works very much like theirs. Hope it helps.

NZ_Kiwis

hmm seems okay until I run it in my page

http://www.rugbyleaguenz.com/2007

This is the included pagem what is wrong??

	<script type="text/javascript" language="Javascript"><!-- // --><![CDATA[
	function switchTabs(on, off, tabTitle)
	{
		var tOn = document.getElementById(on+tabTitle);
		var tOff = document.getElementById(off+tabTitle);
		var dOn = document.getElementById(on);
		var dOff = document.getElementById(off);

	tOn.className = "selected";
	tOff.className = "deselected";
	dOn.style.display = '';
	dOff.style.display = 'none';
}
//]]></script>





<b><font face="Tahoma">





<font id="table1_title">
<a href="javascript:switchTabs('table1', 'table2', '_title');"><font size="2" 
 color="#000000">Bartercard Cup</font></a><font size="2"> </font>
</font>
	</font></b>
<font id="table2_title">
	<b><font face="Tahoma">
<a href="javascript:switchTabs('table2', 'table1', '_title');"><font size="2" 
 color="#000000">Tri Nations</font></a></font></b>
</font>





<div id="table1">
	<table border="0" width="98%" id="table1" cellspacing="0" cellpadding="0">
<tr>
	<td colspan="5" bgcolor="#000000">
	<p align="center"><b><font size="1" face="Tahoma" color="#FFFFFF">Competition Name (BC)</font></b></td>
</tr>
<tr>
	<td bgcolor="#DDDDDD"><b><font size="1" face="Tahoma">Pld:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Won:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Lost:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Drawn:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Points</font></b></td>
</tr>
<tr>
	<td><font size="1" face="Tahoma">Team</font></td>
	<td align="center"><font size="1" face="Tahoma">3</font></td>
	<td align="center"><font size="1" face="Tahoma">2</font></td>
	<td align="center"><font size="1" face="Tahoma">1</font></td>
	<td align="center"><font size="1" face="Tahoma">7</font></td>
</tr>
</table>	</div>

<div id="table2" style="display:none;">
	<table border="0" width="98%" id="table1" cellspacing="0" cellpadding="0">
<tr>
	<td colspan="5" bgcolor="#000000">
	<p align="center"><b><font size="1" face="Tahoma" color="#FFFFFF">Competition Name (TN)</font></b></td>
</tr>
<tr>
	<td bgcolor="#DDDDDD"><b><font size="1" face="Tahoma">Pld:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Won:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Lost:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Drawn:</font></b></td>
	<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
	Points</font></b></td>
</tr>
<tr>
	<td><font size="1" face="Tahoma">Team #5</font></td>
	<td align="center"><font size="1" face="Tahoma">3</font></td>
	<td align="center"><font size="1" face="Tahoma">2</font></td>
	<td align="center"><font size="1" face="Tahoma">1</font></td>
	<td align="center"><font size="1" face="Tahoma">7</font></td>
</tr>
</table>	</div>

</div>

bpat1434

Per HTML syntax, the ID for an element has to be unique. So you can't have id="table1" twice in your document. Right nw, your table and a div are both called table1. You need to change one, or remove one.

Personally, I'd change the div's ID attribute, and then change the link calls. I went ahead and edited the HTML you posted. Here's a better version of it. I'd also suggest using <span> instead of <font>. Like I said, I kind of cleaned it up a bit....

<script type="text/javascript" language="Javascript"><!-- // --><![CDATA[
    function switchTabs(on, off, tabTitle)
    {
        var tOn = document.getElementById(on+tabTitle);
        var tOff = document.getElementById(off+tabTitle);
        var dOn = document.getElementById(on);
        var dOff = document.getElementById(off);

    tOn.className = "selected";
    tOff.className = "deselected";
    dOn.style.display = '';
    dOff.style.display = 'none';
}
//]]></script>

<div id="display1_title">
	<a href="javascript:switchTabs('display1', 'display2', '_title');" style="color: #000; font-size: 2em; font-family: Tahoma; font-weight: bold;">Bartercard Cup</a>
</div>
<div id="display2_title">
	<a href="javascript:switchTabs('display2', 'display1', '_title');" style="color: #000; font-size: 2em; font-family: Tahoma; font-weight: bold;">Tri Nations</a>
</div>


<div id="display1">
	<table border="0" width="98%" id="table1" cellspacing="0" cellpadding="0">
		<tr>
			<td colspan="5" bgcolor="#000000">
			<p align="center"><b><font size="1" face="Tahoma" color="#FFFFFF">Competition Name (BC)</font></b></td>
		</tr>
		<tr>
			<td bgcolor="#DDDDDD"><b><font size="1" face="Tahoma">Pld:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Won:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Lost:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Drawn:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Points</font></b></td>
		</tr>
		<tr>
			<td><font size="1" face="Tahoma">Team</font></td>
			<td align="center"><font size="1" face="Tahoma">3</font></td>
			<td align="center"><font size="1" face="Tahoma">2</font></td>
			<td align="center"><font size="1" face="Tahoma">1</font></td>
			<td align="center"><font size="1" face="Tahoma">7</font></td>
		</tr>
	</table>
</div>


<div id="display2" style="display:none;">
	<table border="0" width="98%" id="table1" cellspacing="0" cellpadding="0">
		<tr>
			<td colspan="5" bgcolor="#000000">
			<p align="center"><b><font size="1" face="Tahoma" color="#FFFFFF">Competition Name (TN)</font></b></td>
		</tr>
		<tr>
			<td bgcolor="#DDDDDD"><b><font size="1" face="Tahoma">Pld:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Won:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Lost:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Drawn:</font></b></td>
			<td bgcolor="#DDDDDD" align="center"><b><font size="1" face="Tahoma">
			Points</font></b></td>
		</tr>
		<tr>
			<td><font size="1" face="Tahoma">Team #5</font></td>
			<td align="center"><font size="1" face="Tahoma">3</font></td>
			<td align="center"><font size="1" face="Tahoma">2</font></td>
			<td align="center"><font size="1" face="Tahoma">1</font></td>
			<td align="center"><font size="1" face="Tahoma">7</font></td>
		</tr>
	</table>
</div>

That works for me.

Also you really have to watch on your page. You have the main table, the one that holds all the information labeled as "table1". So when you do the switch, it hides that table. Hence why everything disappears. The way to counteract that is to make sure that ever "id" attribute for every element is unique across the page. If it's unique, you won't get this mixup. I believe the above code should work out for this problem.

NZ_Kiwis

Cool, that works for me as well.

One last question, I'm using two table but if the need for 3 was there how would I change the links??

bpat1434

You'd have to change the function as well. You'd have to either make the "off" parameter an array, or add multiple off parameters. The easiest would be arrays:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Switch Tables</title>

<script type="text/javascript" language="Javascript"><!-- // --><![CDATA[
var table1Array=new Array('table2', 'table3');
var table2Array=new Array('table1', 'table3');
var table3Array=new Array('table1', 'table2');

function switchTabs(on, off, tabTitle)
{
	var tOn = document.getElementById(on+tabTitle);
	var dOn = document.getElementById(on);
	tOn.className = "selected";
	dOn.style.display = '';

	for(var i=0; i<off.length; i++)
	{
	    var tmp = document.getElementById(off[i]);
		var tmpTab = document.getElementById(off[i]+tabTitle);
		tmp.style.display="none";
		tmpTab.className="deselected";
	}
}
//]]></script>

<style type="text/css"><!--
#container
{
	width: 500px;
	height: 500px;
	position: absolute;
	top: 50%;
	margin-top: -250px;
	left: 50%;
	margin-left: -250px;

	padding: 0;
}

#tabs
{
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	margin: 0;
}

#table1_title,
#table2_title,
#table3_title
{
	width: 150px;
	height: 20px;
	float: left;
	margin: 0 4px;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 5px 5px 0 0;
	border: 1px solid #000;
}

#table1,
#table2,
#table3
{
	position: absolute;
	top: 22px;
	left: 0;
	width: 500px;
	height: 476px;
	margin: 0;
	padding: 0;

	background-color: #090;
	border: 1px solid #000;
}

#table2
{
	background-color: #900;
}

.selected
{
	background-color: #abd;
	border-bottom: 0;
}

.deselected
{
	background-color: #009;
	color: #000;
}
--></style>
</head>

<body>

<div id="container">

<div id="tabs">
	<div id="table1_title" class="selected">
		<a href="javascript:switchTabs('table1', table1Array, '_title');">Table 1</a>
	</div>
	<div id="table2_title" class="deselected">
		<a href="javascript:switchTabs('table2', table2Array, '_title');">Table 2</a>
	</div>
	<div id="table3_title" class="deselected">
		<a href="javascript:switchTabs('table3', table3Array, '_title');">Table 3</a>
	</div>
</div>

<div id="table1">
	<h3>This is table 1!!</h3>
	<table>
		<tr>
			<th>ID</th>
			<th>Product</th>
		</tr>
		<tr>
			<td>1760181</td>
			<td>Pencil</td>
		</tr>
	</table>
</div>

<div id="table2" style="display:none;">
	<h3>This is Table 2!!</h3>
	<table>
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr>
			<td>Joe</td>
			<td>54</td>
		</tr>
		<tr>
			<td>Jane</td>
			<td>21</td>
		</tr>
	</table>
</div>

<div id="table3" style="display:none;">
	<h3>AFC Playoffs Today!!!</h3>
	<table>
		<tr>
			<th>Team</th>
			<th>Winner?</th>
		</tr>
		<tr>
			<td>Baltimore Ravens</td>
			<td>Of Course they're winners!!</td>
		</tr>
		<tr>
			<td>Indianapolis Colts</td>
			<td>The old Baltimore Colts!!! Ha!! They Lose!!</td>
		</tr>
	</table>
</div>

</div>

</body>
</html>

Just as an example....