document.getElementById() Question

DANZIG · Jun 14, 2004

Hello,
I am trying to display various pieces of data in a table. Some of the table rows contain older data and tend to make the page much larger than need be so I would like to give the users the option to display the older data or not using style=display: . I've tried using document.getElementById(Old) and assigning the same ID=Old to each row which has older data in it. This only works for the first instance of a row with ID=Old.

Is there a way that I can do this?

Suggestions are welcome

Thanks, Danzig

LFI · Jun 14, 2004

If you have several entries with id=Old, then when you getElementById, you get an array back. Run through a for-loop like:

Code:

var oldData = document.getElementById("Old");
for(var i=0; i<oldData.length; i++)
 oldData[i].style.display = "none";

...or whatever the correct css command to change the display of an object is.

'hope that helps.

--Dave

DANZIG · Jun 14, 2004

What would the onclick event for this need to look like?

Thanks, Danzig

LFI · Jun 14, 2004

My bad. getElementById only seems to bring back one item. Does getElementsByTagName work across browswers? If so, you can do this (which works for me in IE6):

Note in the following: I use DIVs to surround old data. I use buttons to show or hide the old data.

Code:

<html>
<head>
<script>
var oldData;
function showOld(show)
{
 if(!oldData) //only loads variable once
 {
  oldData = document.getElementsByTagName("DIV");
 }

 //go through DIVs and check for id=='Old'.
 for(var i=0; i<oldData.length; i++)
  if(oldData[i].id=='Old')
  {
   if(show)
    oldData[i].style.display = "inline";
   else
    oldData[i].style.display = "none";
  }
}
</script>
</head>
<body>
<div id='Old' style='display:none'>3.14<br /></div>
<div id='Old' style='display:none'>6.28<br /></div>
<div id='New'>9.42<br /></div>

<input type='button' value='Show Old Data' onclick='showOld(true);' />
<input type='button' value='Hide Old Data' onclick='showOld(false);' />

</body>
</html>

'hope that helps. Like I said, I don't know about cross-browser compatibility with the getElementsByTagName command.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

document.getElementById() Question

DANZIG

Technical User

LFI

Programmer

DANZIG

Technical User

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor