JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

show/hide multiple rows in a table

Discuss show/hide multiple rows in a table in the JavaScript Development forum on Dev Shed.
show/hide multiple rows in a table JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 28th, 2004, 12:51 AM
noname76 noname76 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2004
Posts: 6 noname76 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Question show/hide multiple rows in a table
<html>
<head>
<script>
function toggle(id) {
if( document.getElementById(id).style.display=='none' ){
document.getElementById(id).style.display = '';
}else{
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>

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

<table border="1">
<tr>
<td>Always Visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

Above will show/hide second row. But I need a script that can hide multiple rows in a table (even with multiple ids/names).


Something like this:


<html>
<head>
<script>
function toggle(id) {
if( document.getElementById(id).style.display=='none' ){
document.getElementById(id).style.display = '';
}else{
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>

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

<table border="1">
<tr id=hidethis">
<td>Hide this</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

But in this case js only hide the first row.
Reply With Quote
  #2  
Old November 28th, 2004, 03:14 AM
noname76 noname76 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2004
Posts: 6 noname76 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Problem is solved, thanks!
Reply With Quote
  #3  
Old January 2nd, 2008, 11:15 AM
Paul3eb Paul3eb is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2007
Location: lexington
Posts: 4 Paul3eb User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 48 m 10 sec
Reputation Power: 0
Quote:
Originally Posted by noname76
Problem is solved, thanks!


how was this solved? i'm running into the same problem.. similar javascript code but it only hides the first element with that id.

javascript Code:
Original - javascript Code 
  1. function hideInactive(element)
  2.         {
  3.             if(document.getElementById(element).style.display == '')
  4.             {
  5.                 document.getElementById(element).style.display = 'none';
  6.                 document.getElementById(element).style.visibility = 'hidden';
  7.             }
  8.             else
  9.             {
  10.                 document.getElementById(element).style.display = '';
  11.                 document.getElementById(element).style.visibility = 'visible';
  12.             }
  13.         }


a checkbox calls the function..

thanks for the help. couldn't find the solution anywhere after searching for a bit..
Reply With Quote
  #4  
Old January 2nd, 2008, 05:53 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 23rd Plane (16000 - 16499 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 16,407 Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level)Kravvitz User rank is General 12nd Grade (Above 100000 Reputation Level) 
Time spent in forums: 4 Months 1 Day 14 h 19 m 23 sec
Reputation Power: 1780
IDs should be unique. You could use a class instead.

P.S. In the future, please start a new thread instead of resuming an ancient one.
__________________
Spreading knowledge, one newbie at a time.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

Check out my blog.
Reply With Quote
  #5  
Old October 28th, 2008, 06:39 AM
rabindra rabindra is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Posts: 69 rabindra User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 17 m 43 sec
Reputation Power: 6
show/Hide Multiple rows
Can you please give an example of how you are calling this function using checkbox/radio button please? A working example will be great.

I am very new to html/javascript and want to implement this functionality in one of my web form that I am doing at the moment.

Thanks for your help


Quote:
Originally Posted by Paul3eb
how was this solved? i'm running into the same problem.. similar javascript code but it only hides the first element with that id.

javascript Code:
Original - javascript Code 
  1. function hideInactive(element)
  2.         {
  3.             if(document.getElementById(element).style.display == '')
  4.             {
  5.                 document.getElementById(element).style.display = 'none';
  6.                 document.getElementById(element).style.visibility = 'hidden';
  7.             }
  8.             else
  9.             {
  10.                 document.getElementById(element).style.display = '';
  11.                 document.getElementById(element).style.visibility = 'visible';
  12.             }
  13.         }


a checkbox calls the function..

thanks for the help. couldn't find the solution anywhere after searching for a bit..
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > show/hide multiple rows in a table

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump



 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.
 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.
 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.
 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.
 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway. 
Stay green...Green IT