Steven
asked on
hide tables based on selection boxes
i have a form created that i need help with hiding tables unless a selection box is checked
the attached screenshot will give you a better idea of what i'm trying to achieve
in the screenshot you see 5 rows of selection boxes
let's begin with the first row (highlighted in yellow)
IF manager 1 is checked, then the table below titled 'management 1' needs to appear
we also have a javascript function (marked with red X) that must be required (but only IF this table is shown)
IF manager 2 is checked, then the table below titled 'management 2' needs to appear
same as above, the red X will be required
the red X is a javascript button which pops open a window for us to select something. that selection is then inserted into the text box to the left of the red X - this should only be required if the table is unhidden by using the selection boxes above.
once we figure out row one 'managers required', i can manipulate the code for the remaining selection rows.
any ideas? or direction?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks! another thing i need to get working is the order these boxes are allowed to be selected.
for example, if they select box 4, then box 1,2,3 should be selected together
you just cant select box 4 and get table 4. make sense?
for example, if they select box 4, then box 1,2,3 should be selected together
you just cant select box 4 and get table 4. make sense?
Put this script in header:
<script type="text/javascript">
function ShowTable(vTable,vChecked)
{
if (vChecked == true)
{
document.getElementById(vT able).styl e.display = 'block';
}
else
{
document.getElementById(vT able).styl e.display = 'none';
}
}
function CheckSelection(vText,vNum, vChecked)
{
if (vChecked == true)
{
for(i=vNum; i>0; i--)
{
document.getElementById(vT ext+i).che cked = true;
ShowTable(vText+i+'Table', true);
}
}
else
{
var maxCount = document.getElementsByName (vText).le ngth;
alert(maxCount);
for(i=vNum; i<maxCount+1; i++)
{
document.getElementById(vT ext+i).che cked = false;
ShowTable(vText+i+'Table', false);
}
}
}
</script>
Put this in your body:
<input type="checkbox" id="Manager1" onclick="ShowTable('Manage r1Table',t his.checke d);CheckSe lection('M anager',1, this.check ed);" name="Manager" />
<input type="checkbox" id="Manager2" onclick="ShowTable('Manage r2Table',t his.checke d);CheckSe lection('M anager',2, this.check ed);" name="Manager" />
<input type="checkbox" id="Manager3" onclick="ShowTable('Manage r3Table',t his.checke d);CheckSe lection('M anager',3, this.check ed);" name="Manager" />
<input type="checkbox" id="Manager4" onclick="ShowTable('Manage r4Table',t his.checke d);CheckSe lection('M anager',4, this.check ed);" name="Manager" />
<table id="Manager1Table" style="display: none;">
...
</table>
<table id="Manager2Table" style="display: none;">
...
</table>
<table id="Manager3Table" style="display: none;">
...
</table>
<table id="Manager4Table" style="display: none;">
...
</table>
Repeat this for all your different types of checkboxes/Tables. Also of course just number them up to what you are using. Be sure to name the checkboxes with the same beginning text as your tables. In this case both Start with 'Manager'. Otherwise you'd need to add more code to compensate for that. Also be sure to have a name attribute for the checkboxes so javascript can get the count of how many checkboxes you have for that type of sign off.
<script type="text/javascript">
function ShowTable(vTable,vChecked)
{
if (vChecked == true)
{
document.getElementById(vT
}
else
{
document.getElementById(vT
}
}
function CheckSelection(vText,vNum,
{
if (vChecked == true)
{
for(i=vNum; i>0; i--)
{
document.getElementById(vT
ShowTable(vText+i+'Table',
}
}
else
{
var maxCount = document.getElementsByName
alert(maxCount);
for(i=vNum; i<maxCount+1; i++)
{
document.getElementById(vT
ShowTable(vText+i+'Table',
}
}
}
</script>
Put this in your body:
<input type="checkbox" id="Manager1" onclick="ShowTable('Manage
<input type="checkbox" id="Manager2" onclick="ShowTable('Manage
<input type="checkbox" id="Manager3" onclick="ShowTable('Manage
<input type="checkbox" id="Manager4" onclick="ShowTable('Manage
<table id="Manager1Table" style="display: none;">
...
</table>
<table id="Manager2Table" style="display: none;">
...
</table>
<table id="Manager3Table" style="display: none;">
...
</table>
<table id="Manager4Table" style="display: none;">
...
</table>
Repeat this for all your different types of checkboxes/Tables. Also of course just number them up to what you are using. Be sure to name the checkboxes with the same beginning text as your tables. In this case both Start with 'Manager'. Otherwise you'd need to add more code to compensate for that. Also be sure to have a name attribute for the checkboxes so javascript can get the count of how many checkboxes you have for that type of sign off.
ASKER
hey thanks greatly, i will be awarding you points for sure
small request, to avoid the validation of which order stuff was checked, etc - we are switching things up
so now instead of selection boxes we will be using drop downs.
so from the manager selection, if they select 2 from the drop down then two tables will be shown
what do you think? how can i change it up, slightly?
small request, to avoid the validation of which order stuff was checked, etc - we are switching things up
so now instead of selection boxes we will be using drop downs.
so from the manager selection, if they select 2 from the drop down then two tables will be shown
what do you think? how can i change it up, slightly?
function ShowTable(vTable,vValue)
{
vValue = parseInt(vValue);
var mySelect = document.getElementById(vT able);
var maxCount = mySelect.getElementsByTagN ame("optio n").length - 1;
if (vValue > 0)
{
for(i=vValue; i>0; i--)
{
document.getElementById(vT able+i+'Ta ble').styl e.display = 'block';
}
for(j=vValue+1; j<maxCount+1; j++)
{
document.getElementById(vT able+j+'Ta ble').styl e.display = 'none';
}
}
else
{
for(k=vValue+1; k<maxCount+1; k++)
{
document.getElementById(vT able+k+'Ta ble').styl e.display = 'none';
}
}
}
<select id="Manager" onclick="ShowTable('Manage r', this.options[this.selected Index].val ue);" >
<option value="0">...Manager...</o ption>
<option value="1">Manager 1</option>
<option value="2">Manager 2</option>
<option value="3">Manager 3</option>
<option value="4">Manager 4</option>
</select>
{
vValue = parseInt(vValue);
var mySelect = document.getElementById(vT
var maxCount = mySelect.getElementsByTagN
if (vValue > 0)
{
for(i=vValue; i>0; i--)
{
document.getElementById(vT
}
for(j=vValue+1; j<maxCount+1; j++)
{
document.getElementById(vT
}
}
else
{
for(k=vValue+1; k<maxCount+1; k++)
{
document.getElementById(vT
}
}
}
<select id="Manager" onclick="ShowTable('Manage
<option value="0">...Manager...</o
<option value="1">Manager 1</option>
<option value="2">Manager 2</option>
<option value="3">Manager 3</option>
<option value="4">Manager 4</option>
</select>
ASKER
okay i'm trying to use that but having a few problems
do i need to piece in code from the table elements above?
do i need to piece in code from the table elements above?
above is what should be in your javascript. You don't need prior posts javascript.
then for each drop down (Manager, Technical Assistance, etc) you'll hav eit look like the last post. Then all the tables should be IDed the same as in previous posts (ie Manager1Table if the select id is Manager). So in this case yes your tables would be like this:
<table id="Manager1Table" style="display: none;">
...
</table>
<table id="Manager2Table" style="display: none;">
...
</table>
<table id="Manager3Table" style="display: none;">
...
</table>
<table id="Manager4Table" style="display: none;">
...
</table>
then for each drop down (Manager, Technical Assistance, etc) you'll hav eit look like the last post. Then all the tables should be IDed the same as in previous posts (ie Manager1Table if the select id is Manager). So in this case yes your tables would be like this:
<table id="Manager1Table" style="display: none;">
...
</table>
<table id="Manager2Table" style="display: none;">
...
</table>
<table id="Manager3Table" style="display: none;">
...
</table>
<table id="Manager4Table" style="display: none;">
...
</table>
ASKER
okay, having some problems with that javascript
im using dreamweaver and its not lighting up like it should (validating the code)
im using dreamweaver and its not lighting up like it should (validating the code)
<script type='text/javascript">
function ShowTable(vTable,vValue)
{
vValue = parseInt(vValue);
var mySelect = document.getElementById(vTable);
var maxCount = mySelect.getElementsByTagName("option").length - 1;
if (vValue > 0)
{
for(i=vValue; i>0; i--)
{
document.getElementById(vTable+i+'Table').style.display = 'block';
}
for(j=vValue+1; j<maxCount+1; j++)
{
document.getElementById(vTable+j+'Table').style.display = 'none';
}
}
else
{
for(k=vValue+1; k<maxCount+1; k++)
{
document.getElementById(vTable+k+'Table').style.display = 'none';
}
}
}
</script>
<script type="text/javascript">
You have a single quote on the beginning instead of a double quote.
You have a single quote on the beginning instead of a double quote.
ASKER
awesooooooome - so things are working, almost
when i select manager 2, both table 1 & 2 appear ONLY IF i click the drop down box
it's like i have to put the dropdown box on focus for the tables to appear
here is my code:
when i select manager 2, both table 1 & 2 appear ONLY IF i click the drop down box
it's like i have to put the dropdown box on focus for the tables to appear
here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function ShowTable(vTable,vValue)
{
vValue = parseInt(vValue);
var mySelect = document.getElementById(vTable);
var maxCount = mySelect.getElementsByTagName("option").length - 1;
if (vValue > 0)
{
for(i=vValue; i>0; i--)
{
document.getElementById(vTable+i+'Table').style.display = 'block';
}
for(j=vValue+1; j<maxCount+1; j++)
{
document.getElementById(vTable+j+'Table').style.display = 'none';
}
}
else
{
for(k=vValue+1; k<maxCount+1; k++)
{
document.getElementById(vTable+k+'Table').style.display = 'none';
}
}
}
</script>
</head>
<body>
<p>
<select id="Manager" onclick="ShowTable('Manager', this.options[this.selectedIndex].value);" >
<option value="0">...Manager...</option>
<option value="1">Manager 1</option>
<option value="2">Manager 2</option>
<option value="3">Manager 3</option>
<option value="4">Manager 4</option>
</select>
</p>
<p> </p>
<table id="Manager1Table" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>can you see me? my name is table 1</td>
</tr>
</table>
<p> </p>
<table id="Manager2Table" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>hi, i'm table 2</td>
</tr>
</table>
<p> </p>
<table id="Manager3Table" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>w00t! w00t! you made it to table 3</td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
Right, that's how it's designed. When are you wanting them to show? By default?
ASKER
when you select manager3 i want the three tables to appear immediately
im having to select manager3 then click the dropdown to regain focus and then the three tables are displayed
im having to select manager3 then click the dropdown to regain focus and then the three tables are displayed
are you using the keyboard to select? you can change the onclick attributes to onchange instead if that works better for you. Just depend son when you want it to fire.
ASKER
ahhh onclick is working perfectly
so when you goto the page i need the tables hidden UNTIL you select from the dropdown
right now all tables are visible on the first page load
so when you goto the page i need the tables hidden UNTIL you select from the dropdown
right now all tables are visible on the first page load
It's because you didn't put the style in.
be sure this is in each table tag:
style="display: none;"
OR
you can do it via CSS file:
table
{
display:none;
}
be sure this is in each table tag:
style="display: none;"
OR
you can do it via CSS file:
table
{
display:none;
}
ASKER
brilliant!!!!! that worked
okay, i've got one more wild request. let me build this out real quick so i can better explain myself.
you're a huge help, much much appreciated
okay, i've got one more wild request. let me build this out real quick so i can better explain myself.
you're a huge help, much much appreciated
ASKER
okay, i thought i could drum up an example but ill just try explaining myself
attached is my working code
there are four drop down boxes and several hidden tables
lets say we have the following drop downs:
dropdown1
dropdown2
dropdown3
dropdown4
then we have four tables
IF dropdown3 is selected, table3 is displayed
BUT its displayed where i placed the table
i want the table moved directly above the others IF table1 or table2 are not selected
does that make sense?
thats the final piece to this project!
attached is my working code
there are four drop down boxes and several hidden tables
lets say we have the following drop downs:
dropdown1
dropdown2
dropdown3
dropdown4
then we have four tables
IF dropdown3 is selected, table3 is displayed
BUT its displayed where i placed the table
i want the table moved directly above the others IF table1 or table2 are not selected
does that make sense?
thats the final piece to this project!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function ShowTable(vTable,vValue)
{
vValue = parseInt(vValue);
var mySelect = document.getElementById(vTable);
var maxCount = mySelect.getElementsByTagName("option").length - 1;
if (vValue > 0)
{
for(i=vValue; i>0; i--)
{
document.getElementById(vTable+i+'Table').style.display = 'block';
}
for(j=vValue+1; j<maxCount+1; j++)
{
document.getElementById(vTable+j+'Table').style.display = 'none';
}
}
else
{
for(k=vValue+1; k<maxCount+1; k++)
{
document.getElementById(vTable+k+'Table').style.display = 'none';
}
}
}
</script>
</head>
<body>
<select id="Manager" onchange="ShowTable('Manager', this.options[this.selectedIndex].value);" >
<option value="0">...Manager...</option>
<option value="1">Manager 1</option>
<option value="2">Manager 2</option>
<option value="3">Manager 3</option>
</select>
<br />
<br />
<table id="Manager1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>can you see me? my name is table 1</td>
</tr>
</table>
<table id="Manager2Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>hi, i'm table 2</td>
</tr>
</table>
<table id="Manager3Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>w00t! w00t! you made it to table 3</td>
</tr>
</table>
<select id="Technical" onchange="ShowTable('Technical', this.options[this.selectedIndex].value);" >
<option value="0">...Technical...</option>
<option value="1">Technical 1</option>
<option value="2">Technical 2</option>
<option value="3">Technical 3</option>
</select>
<br />
<br />
<table id="Technical1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>can you see me? my name is table 1</td>
</tr>
</table>
<table id="Technical2Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>hi, i'm table 2</td>
</tr>
</table>
<table id="Technical3Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>w00t! w00t! you made it to table 3</td>
</tr>
</table>
<select id="Reviewer" onchange="ShowTable('Reviewer', this.options[this.selectedIndex].value);" >
<option value="0">...Reviewer...</option>
<option value="1">Reviewer 1</option>
<option value="2">Reviewer 2</option>
<option value="3">Reviewer 3</option>
</select>
<table id="Reviewer1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>can you see me? my name is table 1</td>
</tr>
</table>
<table id="Reviewer2Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>hi, i'm table 2</td>
</tr>
</table>
<table id="Reviewer3Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>w00t! w00t! you made it to table 3</td>
</tr>
</table>
<br />
<br />
<select id="Executive" onchange="ShowTable('Executive', this.options[this.selectedIndex].value);" >
<option value="0">...Executive...</option>
<option value="1">Executive 1</option>
<option value="2">Executive 2</option>
<option value="3">Executive 3</option>
</select>
<table id="Executive1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>can you see me? my name is table 1</td>
</tr>
</table>
<table id="Executive2Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>hi, i'm table 2</td>
</tr>
</table>
<table id="Executive3Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>w00t! w00t! you made it to table 3</td>
</tr>
</table>
</body>
</html>
just place the tables where you want them to show up. Maybe I don't understand what you are asking. Where do you want the tables? At the bottom of the page? At the top? I figured you wanted them like the image you posted. If so just move all the tables below the drop downs in your html code.
ASKER
all the tables are stacked on top of each other
if table four is selected to be displayed theres a huge gap because of the three tables that are above it and hidden
i would like table four to move to the top
if table four is selected to be displayed theres a huge gap because of the three tables that are above it and hidden
i would like table four to move to the top
I'm not seeing gaps except where you have <br />. display: none; is different than visibility: hidden. Visibility still leaves the space there, it just does not show the contents. display: none actually removes everything as if the code wasn't there including space.
Try only having one <br /> after the selects and see if that's what you want. There are also two <br /> tags before your executive select. In reality I don't think you need the <br /> tags because the tables are block elements.
Try only having one <br /> after the selects and see if that's what you want. There are also two <br /> tags before your executive select. In reality I don't think you need the <br /> tags because the tables are block elements.
ASKER
okay, as i implement this javascript into what ive been handed, i run across a few problems
i believe my problems are caused by vValue = parseInt(vValue)
but possibly not
ive been given selection boxes to use which already have an id
so, for example here is one of my selection boxes:
<SELECT CLASS="selectMenu" ID="_1_1_76_1" NAME="_1_1_76_1" ONCHANGE="ShowTable('Manag er', this.options[this.selected Index].val ue);">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
</SELECT>
and here is the table i would like to show upon selecting value 1:
<table id="_1_1_76_1" style="display:none" width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 1:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 1 Comments:</div></th>
</tr>
i also have a second table to show if option 2 is selected, but since option 1 isnt working i really havent gotten much further
as you can see i already tried piecing a few things in there that worked on our simple proof of concept
so again, i've been handed 6 selection boxes each with a predetermined ID. any ideas?
i believe my problems are caused by vValue = parseInt(vValue)
but possibly not
ive been given selection boxes to use which already have an id
so, for example here is one of my selection boxes:
<SELECT CLASS="selectMenu" ID="_1_1_76_1" NAME="_1_1_76_1" ONCHANGE="ShowTable('Manag
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
</SELECT>
and here is the table i would like to show upon selecting value 1:
<table id="_1_1_76_1" style="display:none" width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 1:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 1 Comments:</div></th>
</tr>
i also have a second table to show if option 2 is selected, but since option 1 isnt working i really havent gotten much further
as you can see i already tried piecing a few things in there that worked on our simple proof of concept
so again, i've been handed 6 selection boxes each with a predetermined ID. any ideas?
change the ID in the code view. You can do a search on in that document and replace every instance of that specific id to how we named things. And also there is a big issue if it is giving the select tag the same id as the table tag. There cannot be duplicate ids on a page. Your other option is to put the select id into the first passed variable for the ShowTable function and then change the table IDs to that id plus the 1 and Table.
ASKER
so do i need to modify the javascript at all?
no. It's dynamic javascript. It will use whatever you pass in as long as you use the naming scheme that I show you. As long as the table id is like this: <Select id>+ # + "Table" you are ok with the javascript.
ASKER
man, having troubles
okay, this is what i've been given:
<SELECT CLASS="selectMenu" ID="_1_1_79_1" NAME="_1_1_79_1" ONCHANGE="markDirty();">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION VALUE="3" >3</OPTION>
<OPTION VALUE="4" >4</OPTION>
</SELECT>
(dont mind the onchange, markdirty function - i will replace that with showtable)
so here is the table i need to hide/unhide IF option 1 is selected:
<table width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 2:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 2 Comments:</div></th>
</tr>
</table>
if you could kindly show me, based on the above - i should be able to take it from there.....i hope
okay, this is what i've been given:
<SELECT CLASS="selectMenu" ID="_1_1_79_1" NAME="_1_1_79_1" ONCHANGE="markDirty();">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION VALUE="3" >3</OPTION>
<OPTION VALUE="4" >4</OPTION>
</SELECT>
(dont mind the onchange, markdirty function - i will replace that with showtable)
so here is the table i need to hide/unhide IF option 1 is selected:
<table width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 2:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 2 Comments:</div></th>
</tr>
</table>
if you could kindly show me, based on the above - i should be able to take it from there.....i hope
Make the bolded changes:
<SELECT CLASS="selectMenu" ID="Manager" NAME="_1_1_79_1" ONCHANGE="ShowTable();">
<OPTION VALUE="0" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION VALUE="3" >3</OPTION>
<OPTION VALUE="4" >4</OPTION>
</SELECT>
<table id="Manager1Table" width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 2:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 2 Comments:</div></th>
</tr>
</table>
<SELECT CLASS="selectMenu" ID="Manager" NAME="_1_1_79_1" ONCHANGE="ShowTable();">
<OPTION VALUE="0" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION VALUE="3" >3</OPTION>
<OPTION VALUE="4" >4</OPTION>
</SELECT>
<table id="Manager1Table" width="800" border="0" cellspacing="3" cellpadding="3">
<tr>
<th class="style1" width="277" valign="bottom"><div align="left"><br>
Management 2:</div></th>
<th class="style1" width="436" valign="bottom"><div align="left"><br>
Management 2 Comments:</div></th>
</tr>
</table>
ASKER
woohoo!
standby
standby
put a <div id="table1"> .. </div> around each table changing the id of course and then set the display to none as mentioned above. the divs when hidden will take no space.
<div id="table1"> .. </div>
<div id="table2"> .. </div>
<div id="table3"> .. </div>
<div id="table4"> .. </div>
<div id="table5"> .. </div>
<div id="table1"> .. </div>
<div id="table2"> .. </div>
<div id="table3"> .. </div>
<div id="table4"> .. </div>
<div id="table5"> .. </div>
GT,
tables are block elements just like divs so adding a div here just adds more text to the page that is not needed.
tables are block elements just like divs so adding a div here just adds more text to the page that is not needed.
ASKER
thanks for all the help - much appreciated!
ah .. true.. I just like divs. :)
and also be sure the javascript is in a script tag in the head section.