Show and Hide

[Nodral]

Hi all

 

I know this contains a bit of JavaScript but it comes from some dynamically created pages using php which are causing it an issue.

 

Here's my scenario.  I have a DB with locations, regions, jobtitles and names in it.

 

My users can select from the DB a specific job title or a location.

This can produce a report of information from a couple of people, up to over 100 (who can still be filtered by any of the above DB columns)

I want to dynamically produce some JS buttons to show / hide any sections which are irrelevant to the user.

 

eg  I select by job title, it gives me all the managers, duty managers, staff, cleaners, etc from the DB for all locations.  I then want  5 buttons to be on the page, each with a different region on it. (this I can do)  I can dynamically label the divs around each of the user information.

 

The issue I have is making the buttons do what I want.  So if you press a button labelled "North West" it hides all records which are not from northwest region.

 

Here's what I have so far, I just can't seem to get the functionality right as I know very little about JS.

 

<script language=javascript type='text/javascript'> 

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.visibility="visible";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'visible'; 
else // IE 4 
document.all.divs[i].visibility = 'visible'; 
} else { 
if (document.getElementById) 
divs[i].style.visibility="hidden"; 
else 
if (document.layers) // Netscape 4 
document.divs[i].visibility = 'hidden'; 
else // IE 4 
document.all.divs[i].visibility = 'hidden'; 
} 
} 
} 

</script> 

 

and then one my php has processed I get a record such as.

<div id='NEREGION'>
	<table border='1' >
	<tr><td colspan='4'>Glasgow </td></tr>
	<tr><td colspan='2' >Employee Name : **********</td><td >Employee Number : *****</td><td colspan='2'>Start Date 25th November 2002</td></tr>
	<tr><td colspan='3'> </td><td rowspan='3'><img src='image.php?ed=2063&y2007=1&y2008=1&y2009=0&y2010=0&y2011=0&forename=1234&surname=5436' height ='400px' width='350px'></td></tr><tr><td colspan='2'>20th June 2007</td><td> NFR Petrol Delivery - Refresher Course</td></tr><tr><td colspan='2'>2nd December 2008</td><td> Incremental Sales</td></tr></table></div>

 

Any ideas?

[Nodral]

Any ideas on this?

[Anti-Moronic]

My friend, use jQuery instead. You will have an easier time. Even if you know little about javascript - start with jQuery. learn selectors or something. We'll need to some example html for the generated rows. Are you wanting to hide this info via AJAX or just using js like a 'quick hide' feature?