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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hiding/Displaying Rows

Status
Not open for further replies.
Josh987

Josh987

Programmer
Feb 26, 2008
2
US
Hello, I am working on a simple collapsible table using some javascript/css. The code I have works find in IE7, but when I try to use it in FireFox, there are several problems. The main problem is that once a row is visible and then hidden again, the space for that row remains, so there are large lines of blank space throughout the page. I have been unable to determine what is causing this, so I'm hoping someone here can. Below is my sample code. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" <head>
<title>title</title>
<script type="text/javascript">
function changeVisibility(childClass)
{

rows=document.getElementById('mainTable').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
if(rows.className == childClass + "h")
{
rows.className = childClass + "v";
rows.style.display = "block";
}
else if(rows.className == childClass + "v")
{
rows.className = childClass + "h";
rows.style.display = "none";
}
}
}
</script>

</head>
<body>
<table id="mainTable">
<tr>
<td> <a href="#" onclick='changeVisibility("Child1")'>+</a></td>
<td> Parent 1 </td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.1</td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.2</td>
</tr>
<tr>
<td> <a href="#" onclick='changeVisibility("Child2")'>+</a></td>
<td>Parent 2</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
Firefox does not like it when you set the display style of a table row to "block", the correct value is "table-row". But guess what? IE6 (can't remember about 7) doesn't understand it. I've answered this question a handful of times already on this forum, I'd suggest using the search utility on this site to hunt down one of the answers. Don't get your hopes up too much though, the search utility on this site is not really known for being reliable.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
I have used
Code: 
rows[i].style.display = "";
to get things to display like I wanted in both Firefox and IE.

Lee
 
Upvote 0 Downvote
rows.style.display = "";

That did it for me. Thank you all for your help!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
128
TheLazyPig
TheLazyPig
LyndonOHRC
  • Locked
  • Question
Text Input tag value not displaying
Replies
5
Views
675
LyndonOHRC
LyndonOHRC
LyndonOHRC
  • Locked
  • Question
JQuery Autocomplete displaying empty select list
Replies
1
Views
246
LyndonOHRC
LyndonOHRC
tshad
  • Locked
  • Question
tooltip not displaying all text
Replies
1
Views
104
jpadie
jpadie
ItHurtsWhenIThink
  • Locked
  • Question
Hide/show table rows 1
Replies
2
Views
995
ItHurtsWhenIThink
ItHurtsWhenIThink

Part and Inventory Search

Sponsor

Back
Top