473,386 Members | 1,699 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > show/hide rows of a table

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Show/hide rows of a table

I have been searching on this for awhile and cant find anything and playing around with it got me no where. I will start with what I am after and then explain what I have.

I have a table with 3 rows and 2 columns. I would like on page load to only have one row visible with the bottom two rows hidden. I would like to have an "add" button on the bottom most visible row. When you click the "add" button it adds a row to the bottom and moves the add button to the bottom row. I would also like remove buttons on each row to hide that particular row. The remove button works so that any row you remove it shifts the rows up and adds an "add" button to the bottom most row.

Having only the first row visible on load is easy using:

Expand|Select|Wrap|Line Numbers
  1. style="display: none;"
Having remove buttons is equally easy using a hide javascript function.

The problem I am having is getting the "add" button to work properly. I was trying to do it using a hide/show script and combining them. When you click the button it "shows" row 2, "shows" add button on row 2 and "hides" add button on row 1. Doing it this way means I would have to use hide show functions on the remove button to get the "add" buttons to reappear. Working through it I found I was writing myself in circles using the add/show functions and it always would get out of sync.

How can I accomplish this. I have seen this kind of functionality before but cant find a website now that uses it. I am thinking I might need a smarter javascript then a simple hide/show.

The javascript i am using for the hide/show is (I know it could be a lot simpler by using something besides an if/else statement. I am not a javacripter and this is the first thing that I got to work, but perhaps someone could point me in the right direction for that as well.)

Expand|Select|Wrap|Line Numbers
  1. function showmb(e){
  2.     if (e.style.display == "none"){
  3.     e.style.display = "";
  4.     }
  5.     else{
  6.     e.style.display = "";
  7.     }
  8.     }
  9. function hidemb(e){
  10.     if (e.style.display == ""){
  11.     e.style.display = "none";
  12.     }
  13.     else{
  14.     e.style.display = "none";
  15.     }
  16.     }
Thanks again.

<EDIT> Edited for claritys sake.
Nov 14 '07 #1
18 7513
acoder
16,027 Expert Mod 8TB
Why not put the Add button outside the table and hide it once the maximum number of rows is reached.
Nov 14 '07 #2
Excellent idea.

Now how would I make a button to show the next hidden row instead of just showing the row I specify when creating the button. I am guessing there will need to be a variable in the JavaScript function but I am not a great javascripter, or perhaps there is an easier way and I am seeing it more difficult than it is.
Nov 14 '07 #3
acoder
16,027 Expert Mod 8TB
It shouldn't be too difficult.

Keep a global variable with the current row no. When you press the Add button, increment this variable while showing the next row.
Nov 16 '07 #4
Thanks so much for all the help. I am still stumped at how to do this after trying and trying. Here is the code I have so far and it all works great except I can not figure out how to combine the 3 add buttons at the bottom so that I only have 1 button. I know that I need to give more intelligence to the javascript. I am just not a programmer to figure it out. Could someone be so kind to give me an example?.

I would like the add button to continue adding the hidden rows until they are all visible then the button disappears. Once any row/rows is hidden again the button would need to reappear. Here is the code I am working with.

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>

<SCRIPT type="text/javascript">
function showmb(e){
if (e.style.display == "none"){
e.style.display = "";
}
else{
e.style.display = "";
}
}
function hidemb(e){
if (e.style.display == ""){
e.style.display = "none";
}
else{
e.style.display = "none";
}
}
</SCRIPT>
<TITLE>
SHOW/HIDE TEST
</TITLE>
</HEAD>
<BODY>
<TABLE style=
"background-color: rgb(113, 106, 90); text-align: center;"
border="1" cellpadding="2" cellspacing="2">

<TBODY>
<TR>
<TD style="background-color: rgb(73, 69, 58);">
<TABLE style=
"background-color: rgb(113, 106, 90); text-align: left;"
border="0" cellpadding="2" cellspacing="2">
<TBODY>
<TR>
<TD style="background-color: rgb(73, 69, 58);">
<TABLE style="text-align: left; width: 1200px;"
border="0" cellpadding="2" cellspacing="2">
<TBODY>

<TR>
<TD style=
"text-align: center; white-space: nowrap; width: 1000px; font-family: Trebuchet MS; font-weight: bold; vertical-align: top;">
<BIG><BIG><SPAN style=
"color: white;">Title</SPAN></BIG></BIG>
</TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>

<TABLE id="monitorbank" style=
"text-align: left; width: 1200px;" border="0"
cellpadding="2" cellspacing="2">
<TBODY>
<TR id="bank1">
<TD style=
"text-align: center; vertical-align: middle;">
<IFRAME src="site1.html" name="b1"
frameborder="0" align="left" height="313"
scrolling="no" width="1084" id=
"b1">monitor bank&nbsp;</IFRAME>
</TD>
<TD align="left" valign="top">
Menu 1<BR>

<INPUT type="button" value="X" onclick=
"hidemb(bank1);">
</TD>
</TR>
<TR id="bank2" style="display: none;">
<TD style=
"text-align: center; vertical-align: middle;">
<IFRAME src="site2.html" name="b2"
frameborder="0" align="left" height="313"
scrolling="no" width="1084" id=
"b2">monitor bank&nbsp;</IFRAME>
</TD>
<TD align="left" valign="top">

Menu 2<BR>
<INPUT type="button" value="X" onclick=
"hidemb(bank2);">
</TD>
</TR>
<TR id="bank3" style="display: none;">
<TD style=
"text-align: center; vertical-align: middle;">
<IFRAME src="site4.html" name="b3"
frameborder="0" align="left" height="313"
scrolling="no" width="1084" id=
"b3">monitor bank&nbsp;</IFRAME>
</TD>

<TD align="left" valign="top">
Menu 3<BR>
<INPUT type="button" value="X" onclick=
"hidemb(bank3);">
</TD>
</TR>
</TBODY>
</TABLE>
</TD>

</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE id="add" style=
"text-align: left; margin-left: auto; margin-right: auto; width: 1225px; height: 66px;"
border="0" cellpadding="2" cellspacing="2">
<TBODY>

<TR>
<TD style="text-align: right;">
<INPUT type="button" value="+(1)" onclick=
"showmb(bank1);"> <INPUT type="button" value="+(2)"
onclick="showmb(bank2);"> <INPUT type="button" value=
"+(3)" onclick="showmb(bank3);">
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>

</HTML>
[/HTML]
Nov 16 '07 #5
acoder
16,027 Expert Mod 8TB
Instead of bank1, bank2 and bank3, pass as string values instead and then get the elements by the id:
Expand|Select|Wrap|Line Numbers
  1. function showmb(id){
  2.     var elem = document.getElementById(id);
  3.     if (elem.style.display ...//etc.
  4.  
Nov 17 '07 #6
What am I doing wrong that this is not working? I am using the same html code above. I have tried making a bunch of changes but cant seem to get it to work.

ACODER = Thanks for all your help with this so far. I dont understand how doing what you did will get this to work. So I dont really know where to start to add it it.


Expand|Select|Wrap|Line Numbers
  1. <SCRIPT type="text/javascript">
  2.   var bk1 = document.getElementById(bank1);
  3.   var bk2 = document.getElementById(bank2);
  4.   var bk2 = document.getElementById(bank3);
  5.  
  6. function addmb(bk1,bk2,bk3){
  7.   if (bk1.style.display = "none")
  8.   {
  9.    bk1.style.display = "";
  10.   }
  11. else if (bk2.style.display = "none")
  12.   {
  13.   bk2.style.display = "";
  14.   }
  15. else if (bk3.style.display = "none")
  16.   {
  17.   bk3.style.display = "";
  18.   }
  19. else
  20.   {
  21.   bk1.style.display = "none";
  22.   }
  23. }
  24. </SCRIPT>
Nov 19 '07 #7
acoder
16,027 Expert Mod 8TB
No, I meant where you call the function:
[HTML]<INPUT type="button" value="X" onclick="hidemb(bank1);">[/HTML]
bank1 could be the id:
[HTML]<INPUT type="button" value="X" onclick="hidemb('bank1');">[/HTML]and then in the function:
Expand|Select|Wrap|Line Numbers
  1. function hidemb(id) {
  2. var bank = document.getElementById(id);
  3. // then your code as before using bank...
  4. }
Nov 20 '07 #8
andho
34
try this out, you have to replace the IDs with your own IDs. This code will show the first row that is not showing when the addButton is pressed. and remove the row that the button was pressed for when the remove button is pressed. i havent tested this. just a quick one.

Expand|Select|Wrap|Line Numbers
  1. function addrow() {
  2. var table = document.getElementById('idOfTheTable');
  3. var noOfRowsShowing = 0;
  4. for (i=0; i<table.rows.length; i++) {
  5. if (table.rows[i].style.display == "none") {
  6. table.rows[i].style.display = "";
  7. noOfRowsShowing++;
  8. break;
  9. } else {
  10. noOfRowsShowing++;
  11. }
  12. }
  13. if (noOfRowsShowing == table.rows.length) {
  14. this.style.display = "none";
  15. }
  16. }
Expand|Select|Wrap|Line Numbers
  1. function remrow() {
  2. var parent = this.parentNode;
  3. while (parent!="tr") {
  4. parent = parent.parentNode;
  5. }
  6. parent.style.display = "none";
  7.  
  8. var addButton = document.getElementById('idOfAddButton');
  9. addButton.style.display = "";
  10.  
  11. }
Nov 20 '07 #9
andho
34
hey so did this work?
Nov 20 '07 #10
Sorry i think we are in very different time zones. I will try it today and post back here to let you all know.

*Update*

The add button you posted works to add the next row but it does not get hidden when all the rows are shown. The remove rows button did not work. I will look at this a bit more in a little while. Having the add button show the next row is a BIG improvement however so thanks so much.
Nov 20 '07 #11
Ok some fiddling with it and combining my "hide" script with your show script has it working just the way I want it to. A big thanks for everyones help and here is the script if anyone comes along looking for it.

Expand|Select|Wrap|Line Numbers
  1.     <SCRIPT type="text/javascript">
  2.       function addmb() {
  3.       var table = document.getElementById('monitorbank');
  4.       var noOfRowsShowing = 0;
  5.       var addButton = document.getElementById('addbutton');
  6.       for (i=0; i<table.rows.length; i++) {
  7.       if (table.rows[i].style.display == "none") {
  8.       table.rows[i].style.display = "";
  9.       noOfRowsShowing++;
  10.       break;
  11.       } else {
  12.       noOfRowsShowing++;
  13.       }
  14.       }
  15.       if (noOfRowsShowing == table.rows.length) {
  16.       addbutton.style.display = "none";
  17.       }
  18.       }
  19.     function hidemb(e){
  20.     if (e.style.display == ""){
  21.     e.style.display = "none";
  22.     }
  23.     else{
  24.     e.style.display = "none";
  25.     }
  26.         {
  27.       var addButton = document.getElementById('addbutton');
  28.       addButton.style.display = "";
  29.     }  
  30.  
  31. } 
  32.     </SCRIPT>
Nov 20 '07 #12
I got ahead of myself. I think something is wrong with the count. I cant figure out what. Using this template the first time you "add" the three rows the add button goes away like it should. If you then close Menu 3 the add button reappears and then disappears when you click it to re add the third button.

The problem occurs when you hide the first row or the second row and then re-add it. The add button does not get hidden until you click on it again. Its hard to explain but if you try this code you will see what I mean. Otherwise its totally awesome and is going to be great.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  2. "http://www.w3.org/TR/REC-html40/loose.dtd">
  3. <HTML>
  4.   <HEAD>
  5.  
  6.     <SCRIPT type="text/javascript">
  7.   function addmb() {
  8.       var table = document.getElementById('monitorbank');
  9.       var noOfRowsShowing = 0;
  10.       var addButton = document.getElementById('addbutton');
  11.       for (i=0; i<table.rows.length; i++) {
  12.       if (table.rows[i].style.display == "none") {
  13.       table.rows[i].style.display = "";
  14.       noOfRowsShowing++;
  15.       break;
  16.       } else {
  17.       noOfRowsShowing++;
  18.       }
  19.       }
  20.       if (noOfRowsShowing == table.rows.length) {
  21.       addbutton.style.display = "none";
  22.       }
  23.       }
  24.     function hidemb(e){
  25.     if (e.style.display == ""){
  26.     e.style.display = "none";
  27.     }
  28.     else{
  29.     e.style.display = "none";
  30.     }
  31.      {
  32.       var addButton = document.getElementById('addbutton');
  33.       addButton.style.display = "";
  34.     }  
  35.  
  36.     } 
  37.     </SCRIPT>
  38.     <TITLE></TITLE>
  39.   </HEAD>
  40.   <BODY>
  41.     <TABLE style="text-align: left; width: 352px;" border="0"
  42.     cellpadding="2" cellspacing="2">
  43.  
  44.       <TBODY>
  45.         <TR align="center">
  46.           <TD valign="undefined">
  47.             Title
  48.           </TD>
  49.         </TR>
  50.         <TR>
  51.           <TD align="undefined" valign="undefined">
  52.             Menubar
  53.           </TD>
  54.  
  55.         </TR>
  56.         <TR>
  57.           <TD align="undefined" valign="undefined">
  58.             <TABLE id="monitorbank" style=
  59.             "text-align: left; width: 352px;" border="2"
  60.             cellpadding="2" cellspacing="2">
  61.               <TBODY>
  62.                 <TR id="bank1">
  63.                   <TD align="undefined" valign="undefined">
  64.                     <TABLE id="bank1tbl" style=
  65.                     "text-align: left; width: 352px;" border="1"
  66.                     cellpadding="2" cellspacing="2">
  67.                       <TBODY>
  68.  
  69.                         <TR>
  70.                           <TD align="undefined" valign="undefined">
  71.                             Menu1 <INPUT type="button" value="X"
  72.                             onclick="hidemb(bank1);">
  73.                           </TD>
  74.                         </TR>
  75.                         <TR>
  76.                           <TD align="undefined" valign="undefined">
  77.                             Monitor 1
  78.                           </TD>
  79.  
  80.                         </TR>
  81.                       </TBODY>
  82.                     </TABLE>
  83.                   </TD>
  84.                 </TR>
  85.                 <TR id="bank2" style="display: none;">
  86.                   <TD align="undefined" valign="undefined">
  87.                     <TABLE id="bank2tbl" style=
  88.                     "text-align: left; width: 352px;" border="1"
  89.                     cellpadding="2" cellspacing="2">
  90.                       <TBODY>
  91.  
  92.                         <TR>
  93.                           <TD align="undefined" valign="undefined">
  94.                             Menu 2 <INPUT type="button" value="X"
  95.                             onclick="hidemb(bank2);">
  96.                           </TD>
  97.                         </TR>
  98.                         <TR>
  99.                           <TD align="undefined" valign="undefined">
  100.                             Monitor 2
  101.                           </TD>
  102.  
  103.                         </TR>
  104.                       </TBODY>
  105.                     </TABLE>
  106.                   </TD>
  107.                 </TR>
  108.                 <TR id="bank3" style="display: none;">
  109.                   <TD align="undefined" valign="undefined">
  110.                     <TABLE id="bank3tbl" style=
  111.                     "text-align: left; width: 352px;" border="1"
  112.                     cellpadding="2" cellspacing="2">
  113.                       <TBODY>
  114.  
  115.                         <TR>
  116.                           <TD align="undefined" valign="undefined">
  117.                             Menu 3 <INPUT type="button" value="X"
  118.                             onclick="hidemb(bank3);">
  119.                           </TD>
  120.                         </TR>
  121.                         <TR>
  122.                           <TD align="undefined" valign="undefined">
  123.                             Monitor 3
  124.                           </TD>
  125.  
  126.                         </TR>
  127.                       </TBODY>
  128.                     </TABLE>
  129.                   </TD>
  130.                 </TR>
  131.               </TBODY>
  132.             </TABLE>
  133.           </TD>
  134.         </TR>
  135.  
  136.         <TR align="right">
  137.           <TD valign="undefined">
  138.             <INPUT id="addbutton" type="button" value="ADD"
  139.             onclick="addmb();">
  140.           </TD>
  141.         </TR>
  142.       </TBODY>
  143.     </TABLE>
  144.   </BODY>
  145. </HTML>
  146.  
Nov 21 '07 #13
acoder
16,027 Expert Mod 8TB
I got ahead of myself. I think something is wrong with the count. I cant figure out what. Using this template the first time you "add" the three rows the add button goes away like it should. If you then close Menu 3 the add button reappears and then disappears when you click it to re add the third button.

The problem occurs when you hide the first row or the second row and then re-add it. The add button does not get hidden until you click on it again. Its hard to explain but if you try this code you will see what I mean.
This is because you're using a for loop to check visible/hidden rows in order and breaking out of the loop when you come across a hidden row.

Try:
Expand|Select|Wrap|Line Numbers
  1.   function addmb() {
  2.       var table = document.getElementById('monitorbank');
  3.       var noOfRowsShowing = 0;
  4.       var addButton = document.getElementById('addbutton');
  5.       var alreadyAdded = false;
  6.       for (i=0; i<table.rows.length; i++) {
  7.         if (table.rows[i].style.display == "none") {
  8.           if  (!alreadyAdded) {
  9.             table.rows[i].style.display = "";
  10.             alreadyAdded = true;
  11.             noOfRowsShowing++;
  12.           }
  13.         } else {
  14.           noOfRowsShowing++;
  15.         }
  16.       }
  17.       if (noOfRowsShowing == table.rows.length) {
  18.         addbutton.style.display = "none";
  19.       }
  20.     }
  21.  
Nov 21 '07 #14
andho
34
yes i think i know the problem here. i'll think about this and post a solution
Nov 21 '07 #15
andho
34
sorry didnt see your post acoder. guess that will work
Nov 21 '07 #16
acoder
16,027 Expert Mod 8TB
sorry didnt see your post acoder. guess that will work
Imagine you didn't see it and post your solution! I've not tested mine, but I think it should work.
Nov 21 '07 #17
Beautiful. Thanks so much andho and acoder. You have helped me immensely there are other ways I could have accomplished the functionality but none would be this elegant. Works like a charm.

I did look all over trying to find a script that would do this because it doesn't seem like it would be that uncommon. Is there someplace on here to post finished scripts so that others can find them. I didnt write any/much of the code but I am just curious on whats the right thing to do?

Thanks again.
Nov 21 '07 #18
acoder
16,027 Expert Mod 8TB
Glad you managed to get it working.
I did look all over trying to find a script that would do this because it doesn't seem like it would be that uncommon. Is there someplace on here to post finished scripts so that others can find them. I didnt write any/much of the code but I am just curious on whats the right thing to do?
There is an Articles (now known as howtos) section - see the dropdown menu above. You could start an article in the editor's corner. I can help you write it if you want.
Nov 22 '07 #19

Sign in to post your reply or Sign up for a free account.

Similar topics

3
Dynamically Show/Hide table rows?
by: Harry | last post by:
I want to provide a drill down facility for the users - the plan is to intially display a table with summary rows containing results of previous selected search criteria. In each summary row you...
Javascript
3
<DIV> show/hide...both appear...why oh why?
by: KathyB | last post by:
Hi, totally new to the div show/hide thing. I have some rows in a table. When I first load the page, I only want to see divs where the divID=ForView. When I load now, I see BOTH rows...even...
Javascript
7
dynamically show/hide a table row in most browsers?
by: Mad Scientist Jr | last post by:
Through messing around I got IE6 (win xp) to show/hide a table row. I gave my <TR> an ID of "trRow" and trRow.style.display='none'; hides it trRow.style.display='block'; displays it (will any...
Javascript
10
show/hide a table row
by: oLE | last post by:
I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...
Javascript
1
Nested Tables + Show / Hide Rows issue
by: le_sloth | last post by:
Hi I'm generating a series of reports from an application that will be published on a client's intranet. The idea is that each of these reports is arranged into major product groups,...
HTML / CSS
2
Show/hide table
by: Mateo | last post by:
Hi! I have a litle JS problem.... I'm trying to make show/hide table JS function, but my show/hide table function works only on IE.... It works in mozilla partially. Actually,every time when I...
Javascript
1
Show/Hide Table Rows
by: shankwheat | last post by:
I'm creating a dynamic table with asp and I would like to add a "Show All" and "Collapse All" feature to show/hide certain rows within the table. This code works well for showing/hiding one row at...
Javascript
6
Hide a table column in IE
by: Ian Collins | last post by:
I'm having a spot of bother hiding table columns in IE. With FF, setting the column cell's style.display to none (or changing the cell's class name to style that has display: none) completely...
Javascript
1
how to show/hide rows when using iterate tag...
by: prathna | last post by:
Hi .. I have a logic:iterate tag which will display 5 rows each row with a drop downlist and 2 textfields.now by default all the rows will be shown.how do i hide all the rows except the first...
Javascript
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!