homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
toggle show/hide rows
How can I show and hide table rows?
steveonz



 
Msg#: 4106104 posted 8:06 pm on Mar 28, 2010 (gmt 0)

Hey there!

I found a great code to do this, but I would like to have the row defult set to hide via the Javascript.
This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code.


Thank you!
.................

<html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>


<span onClick="toggle('nameit');">toggle</span><br /><br />

<table border="1">
<tr nameit=fred >
<td >Always Visible</td>
</tr>
<tr nameit=fred id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>s visible</td>
</tr>
</table>
</script>
</body>
</html>

 

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4106104 posted 9:18 pm on Mar 29, 2010 (gmt 0)

</script>

becomes

window.onload = function(){toggle('nameit');};
</script>

Welcome !

steveonz



 
Msg#: 4106104 posted 10:54 pm on Mar 29, 2010 (gmt 0)

Hello, Thanks.

That is great but it affects my layers. at the start of the page I have another onload event... How can I have 2 on load events in separate scripts?

<style type="text/css">

body{height:100%}
div.loading-invisible{
display:none;
}
div.loading-visible{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
background:#fff;
_background:none;
opacity:.75;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
padding-top:25%;
}
</style>

</head>
<body>
<div id="loading" class="loading-invisible">
<img src="images/loading.gif" border=0>
</div>
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible";
window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
}
</script>

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4106104 posted 11:43 pm on Mar 29, 2010 (gmt 0)

window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
toggle('nameit');
}

combine into one, and drop the other.

steveonz



 
Msg#: 4106104 posted 12:24 am on Mar 30, 2010 (gmt 0)

Humm that would work fine, but the second function is variable. Whereas I only want it to load on a specific time.

The reason is the customer needs to fill out some information, if the information has already been filled out then they do not need to see the rows. However they are still able to un hide the rows.

This is why it is an issue. I have thought about putting it into css but this will permanently hide it too.

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4106104 posted 4:45 am on Mar 30, 2010 (gmt 0)

if "loading" is conditionally present

window.onload=function(){
var el = document.getElementById("loading");
if ( el ) { el.className = "loading-invisible"; }
toggle('nameit');
}

steveonz



 
Msg#: 4106104 posted 6:17 am on Mar 30, 2010 (gmt 0)

That is super amazing... You have no idea how much this helps! Thank you so very very much!

It did stop another layer I was using below this from working, however I think I have fixed it for now.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved