logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-22-2009, 04:41 PM   #1
johnny5
 
Join Date: Mar 2009
Posts: 2
Default Swap table code

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
johnny5 is offline   Reply With Quote
Old 03-22-2009, 05:52 PM   #2
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

are you wanting to replace the full table or just a cell
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 03-22-2009, 05:59 PM   #3
johnny5
 
Join Date: Mar 2009
Posts: 2
Default

The full table.
johnny5 is offline   Reply With Quote
Old 03-22-2009, 07:09 PM   #4
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

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

HTML Code:
<?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>
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk

Last edited by davidj; 03-22-2009 at 07:45 PM..
davidj is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:35 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com