PDA

View Full Version : Swap table code


johnny5
03-22-2009, 03:41 PM
Hi,

I'm trying to swap a table for another table when a link is clicked.

I have a vertical table containing about 10 rollover images and 10 lines of text underneath each of these images. The only thing that will change on the table I want to swap it for are the lines of text. The table to fill the space is the exact same size as the one it's replacing, and everything else on the page will remain the same regardless of which tables is visible.

The only thing I can see that resembles what I'm trying to do is the 'swap image' function in behavious.

But, is there code I can use to swap a table....or is it possible?

Any help would be appreciated.

Regards
Johnny5

davidj
03-22-2009, 04:52 PM
are you wanting to replace the full table or just a cell

johnny5
03-22-2009, 04:59 PM
The full table.

davidj
03-22-2009, 06:09 PM
This script will guide you into making elements visible and invisible

Copy the script into a blank page and run it

You need to have an understanding of html at least. If you dont know any code then i cant help other than tell you to learn it

The Javascript is very simple and you can see how i am doing the visible / invisible malarkey


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO supply a title</title>
<scriptlanguage="javascript">


function changeTable(b){

t1 = document.getElementById('table1');
t2 = document.getElementById('table2');
b1 = document.getElementById('btn1');
b2 = document.getElementById('btn2');

switch(b){

case '1':
t1.style.display='none';
b1.style.display='none';
t2.style.display='block';
b2.style.display='block'; break;

case '2':
t1.style.display='block';
b1.style.display='block';
t2.style.display='none';
b2.style.display='none'; break;

default:
t1.style.display='block';
b1.style.display='block';
t2.style.display='none';
b2.style.display='none'; break;

}

}

</script>

</head>

<body onload="changeTable()">

<inputtype="button" value="click" id="btn1" onclick="changeTable('1')"/>
<inputtype="button" value="click" id="btn2" onclick="changeTable('2')"/>

<table border="1" id="table1">
<thead>
<tr>
<th>table1</th>
<th>table1</th>
</tr>
</thead>
<tbody>
<tr>
<td>table1</td>
<td>table1</td>
</tr>
<tr>
<td>table1</td>
<td>table1</td>
</tr>
<tr>
<td>table1</td>
<td>table1</td>
</tr>
</tbody>
</table>

<table border="1" id="table2" >
<thead>
<tr>
<th>table2</th>
<th>table2</th>
</tr>
</thead>
<tbody>
<tr>
<td>table2</td>
<td>table2</td>
</tr>
<tr>
<td>table2</td>
<td>table2</td>
</tr>
<tr>
<td>table2</td>
<td>table2</td>
</tr>
</tbody>
</table>

</body>

</html>