PDA

View Full Version : populating table data based on the data selection in List Box

bsquare
12-15-2008, 03:30 AM
Hi Experts,

I am designing a webpage where based on the year selection the associated years webtable needs to be displayed in the webpage.

Pls give som suggestions and if possible the code on to how to code this using HTML and Jav Script.

I know I have to write afunction and then call the fn based on the input.but need your help on this.

Thanks,
Bsquare
batterj2
12-15-2008, 05:14 AM
Not exactly populating it but displaying/hiding pre-populated tables. Better for accessibility or if someone has CSS and Javascript turned off.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Your Page</title>
<style type="text/css">
table
{
background-color:#cccccc;
}
td
{
background-color:#ffffff;
}
.hiddenTable
{
display:none;
}
</style>
<script type="text/javascript">
var visibleTable = null;
function showYear()
{
visibleTable.style.display = "none";
var year = document.getElementById("yearSelector").value;
visibleTable = document.getElementById("year" + year);
visibleTable.style.display = "table";
}
function init()
{
visibleTable = document.getElementById('year2008');
}
</script>
</head>
<body onload="init();">
<select id="yearSelector" onchange="showYear();">
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
</select>
<table summary="Year 2008" id="year2008">
<tr>
<td>Table stuff for 2008 goes here</td>
</tr>
</table>
<table summary="Year 2007" id="year2007" class="hiddenTable">
<tr>
<td>Table stuff for 2007 goes here</td>
</tr>
</table>
<table summary="Year 2006" id="year2006" class="hiddenTable">
<tr>
<td>Table stuff for 2006 goes here</td>
</tr>
</table>
</body>
</html>
bsquare
12-15-2008, 07:06 AM
hi Thanks for your reponse...

the function showYear() is not getting invoked on year change from the dropdown.

Could you please check it once gain and let me know.

Thanks in advance.....
batterj2
12-15-2008, 08:45 AM
Apologies - IE doesn't seem to like altering the display property

Replace the showYear function with this:

function showYear()
{
visibleTable.style.visibility = "hidden";
visibleTable.style.position = "absolute";
var year = document.getElementById("yearSelector").value;
visibleTable = document.getElementById("year" + year);
visibleTable.style.visibility = "visible";
visibleTable.style.position = "relative";
}

and replace the CSS with this:


<style type="text/css">
table
{
background-color:#cccccc;
}
td
{
background-color:#ffffff;
}
.hiddenTable
{
visibility:hidden;
position:absolute;
}
</style>
bsquare
12-16-2008, 12:44 AM
hi Thanks for your reply! it was of great help to me.

the below code works if I am populating only one table for an year.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script language=javascript>
function ShowYearlyChart()
{
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
tables[i].style.visibility="hidden";
}
var year = document.getElementById("yearSelector").value;
visibleTable = document.getElementById(year);
visibleTable.style.visibility = "visible";
}
</script>
</head>
<body onload="init();">
<select id="yearSelector" onchange='ShowYearlyChart();'>
<option>Select an Year</option>
<option value="2009" selected>2009</option>
<option value="2007">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
</select>
<!..2009 Data>
<!..Region1 Team>
<table summary="Year 2009" id="2009" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder" >

<tr>
<td>Table stuff for Region1 2009 goes here</td>
</tr>
</table>

<table border="1" cellpadding="1" cellspacing="2" class="tableborder" summary="Year 2009" id="2009" style="visibility:hidden">

<tr>
<td>Table stuff for Region2 2009 goes here</td>
</tr>
</table>
<!..Region3 Team>
<table border="1" cellpadding="1" cellspacing="2" class="tableborder" summary="Year 2009" id="2009" style="visibility:hidden">


<tr>
<td>Table stuff for Region3 2009 goes here</td>
</tr>
</table>


<!..2008 Data>
<!..Region1 Team>
<table summary="Year 2008" id="2008" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">
<tr>
<td>Table stuff for Region1 2008 goes here</td>
</tr>
</table>

<!..Region2 Team>
<table summary="Year 2008" id="2008" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">
<tr>
<td>Table stuff for Region2 2008 goes here</td>
</tr>
</table>
<!..Region3 Team>
<table summary="Year 2007" id="2008" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">

<tr>
<td>Table stuff for Region3 2008 goes here</td>
</tr>
</table>




<!..2007 Data>
<!..Region1 Team>
<table summary="Year 2007" id="2007" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">
<tr>
<td>Table stuff for Region1 2007 goes here</td>
</tr>
</table>

<!..Region2 Team>
<table summary="Year 2007" id="2007" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">
<tr>
<td>Table stuff for Region2 2007 goes here</td>
</tr>
</table>
<!..Region3 Team>
<table summary="Year 2007" id="2007" style="visibility:hidden" border="1" cellpadding="1" cellspacing="2" class="tableborder">

<tr>
<td>Table stuff for Region3 2007 goes here</td>
</tr>
</table>

</body>
</html>
there are two issues with the code:
1.My Actual reqt is I need to display a set of 3 tables on selection of an year in the list box.

when I open the below html file in IE and select an yr it displays only Region1 table's data but not of Region2 and Region3.

2. On an year selection from the list box, I want the table data to be displayed in the very first part of the page but for 2008 nd 2007 associated tables get displayed at the end of the page leaving first part of the page empty.

Thnx in advance...
batterj2
12-16-2008, 04:28 AM
1. Surround the tables in your code with <div></div> tags and give that the id to be referred to by the Javascript code. This makes whatever is inside these tags be affected by the code so you don't need to loop through all the tables.
e.g.

<div id="2009">
<table>
...
</table>
<table>
...
</table>
<table>
...
</table>
</div>


2. The reason the tables aren't going to the top is because with your code as it is at the moment the elements are still present just not visible so they are taking up the room they normally would. To fix this, whenever you set the tables to hidden set their position to absolute and change it back to relative when you make them visible again.
e.g.


var year = document.getElementById("yearSelector").value;
visibleTable = document.getElementById(year);
visibleTable.style.visibility = "visible";
visibleTable.style.position = "relative";
bsquare
12-16-2008, 09:18 PM
hi,

the second issue is resolved where as the div tag is not working...
I hav removed id from table and added id in div tag and modified the fn to recognise div tags. but when i select an yr in the page nothing gets displayed.

also I need to display label of the associated table as "year:2008" on top of the table.so this label also wud be based on selection in the drop down. pls hel me on this


Thanks
batterj2
12-17-2008, 04:19 AM
Could you post your current source code so I can amend please?