Show/hide rows of a table

**acoder** · Nov 14 '07, 09:33 AM

Why not put the Add button outside the table and hide it once the maximum number of rows is reached.

**Liquidtouch** · Nov 14 '07, 09:18 PM

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.

**acoder** · Nov 16 '07, 11:15 AM

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.

**Liquidtouch** · Nov 16 '07, 07:01 PM

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.displa y == "none"){
e.style.display = "";
}
else{
e.style.display = "";
}
}
function hidemb(e){
if (e.style.displa y == ""){
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="backgrou nd-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="backgrou nd-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><SP AN 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">monito r bank </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">monito r bank </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">monito r bank </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]

**acoder** · Nov 17 '07, 01:21 PM

Instead of bank1, bank2 and bank3, pass as string values instead and then get the elements by the id:
[CODE=javascript]function showmb(id){
var elem = document.getEle mentById(id);
if (elem.style.dis play ...//etc.
[/CODE]

**Liquidtouch** · Nov 19 '07, 07:58 PM

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.

Code:

<SCRIPT type="text/javascript">
  var bk1 = document.getElementById(bank1);
  var bk2 = document.getElementById(bank2);
  var bk2 = document.getElementById(bank3);

function addmb(bk1,bk2,bk3){
  if (bk1.style.display = "none")
  {
   bk1.style.display = "";
  }
else if (bk2.style.display = "none")
  {
  bk2.style.display = "";
  }
else if (bk3.style.display = "none")
  {
  bk3.style.display = "";
  }
else
  {
  bk1.style.display = "none";
  }
}
</SCRIPT>

**acoder** · Nov 20 '07, 08:21 AM

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:[code=javascript]function hidemb(id) {
var bank = document.getEle mentById(id);
// then your code as before using bank...
}[/code]

**andho** · Nov 20 '07, 08:45 AM

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.

[CODE=javascript]function addrow() {
var table = document.getEle mentById('idOfT heTable');
var noOfRowsShowing = 0;
for (i=0; i<table.rows.le ngth; i++) {
if (table.rows[i].style.display == "none") {
table.rows[i].style.display = "";
noOfRowsShowing ++;
break;
} else {
noOfRowsShowing ++;
}
}
if (noOfRowsShowin g == table.rows.leng th) {
this.style.disp lay = "none";
}
}[/CODE]

[CODE=javascript]function remrow() {
var parent = this.parentNode ;
while (parent!="tr") {
parent = parent.parentNo de;
}
parent.style.di splay = "none";

var addButton = document.getEle mentById('idOfA ddButton');
addButton.style .display = "";

}[/CODE]

**andho** · Nov 20 '07, 05:10 PM

hey so did this work?

**Liquidtouch** · Nov 20 '07, 06:45 PM

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.

**Liquidtouch** · Nov 20 '07, 09:16 PM

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.

Code:

    <SCRIPT type="text/javascript">
      function addmb() {
      var table = document.getElementById('monitorbank');
      var noOfRowsShowing = 0;
      var addButton = document.getElementById('addbutton');
      for (i=0; i<table.rows.length; i++) {
      if (table.rows[i].style.display == "none") {
      table.rows[i].style.display = "";
      noOfRowsShowing++;
      break;
      } else {
      noOfRowsShowing++;
      }
      }
      if (noOfRowsShowing == table.rows.length) {
      addbutton.style.display = "none";
      }
      }
    function hidemb(e){
	if (e.style.display == ""){
	e.style.display = "none";
	}
	else{
	e.style.display = "none";
	}
    	{
      var addButton = document.getElementById('addbutton');
      addButton.style.display = "";
    }  

} 
    </SCRIPT>

**Liquidtouch** · Nov 21 '07, 12:52 AM

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.

Code:

<!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 addmb() {
      var table = document.getElementById('monitorbank');
      var noOfRowsShowing = 0;
      var addButton = document.getElementById('addbutton');
      for (i=0; i<table.rows.length; i++) {
      if (table.rows[i].style.display == "none") {
      table.rows[i].style.display = "";
      noOfRowsShowing++;
      break;
      } else {
      noOfRowsShowing++;
      }
      }
      if (noOfRowsShowing == table.rows.length) {
      addbutton.style.display = "none";
      }
      }
    function hidemb(e){
    if (e.style.display == ""){
    e.style.display = "none";
    }
    else{
    e.style.display = "none";
    }
     {
      var addButton = document.getElementById('addbutton');
      addButton.style.display = "";
    }  

    } 
    </SCRIPT>
    <TITLE></TITLE>
  </HEAD>
  <BODY>
    <TABLE style="text-align: left; width: 352px;" border="0"
    cellpadding="2" cellspacing="2">

      <TBODY>
        <TR align="center">
          <TD valign="undefined">
            Title
          </TD>
        </TR>
        <TR>
          <TD align="undefined" valign="undefined">
            Menubar
          </TD>

        </TR>
        <TR>
          <TD align="undefined" valign="undefined">
            <TABLE id="monitorbank" style=
            "text-align: left; width: 352px;" border="2"
            cellpadding="2" cellspacing="2">
              <TBODY>
                <TR id="bank1">
                  <TD align="undefined" valign="undefined">
                    <TABLE id="bank1tbl" style=
                    "text-align: left; width: 352px;" border="1"
                    cellpadding="2" cellspacing="2">
                      <TBODY>

                        <TR>
                          <TD align="undefined" valign="undefined">
                            Menu1 <INPUT type="button" value="X"
                            onclick="hidemb(bank1);">
                          </TD>
                        </TR>
                        <TR>
                          <TD align="undefined" valign="undefined">
                            Monitor 1
                          </TD>

                        </TR>
                      </TBODY>
                    </TABLE>
                  </TD>
                </TR>
                <TR id="bank2" style="display: none;">
                  <TD align="undefined" valign="undefined">
                    <TABLE id="bank2tbl" style=
                    "text-align: left; width: 352px;" border="1"
                    cellpadding="2" cellspacing="2">
                      <TBODY>

                        <TR>
                          <TD align="undefined" valign="undefined">
                            Menu 2 <INPUT type="button" value="X"
                            onclick="hidemb(bank2);">
                          </TD>
                        </TR>
                        <TR>
                          <TD align="undefined" valign="undefined">
                            Monitor 2
                          </TD>

                        </TR>
                      </TBODY>
                    </TABLE>
                  </TD>
                </TR>
                <TR id="bank3" style="display: none;">
                  <TD align="undefined" valign="undefined">
                    <TABLE id="bank3tbl" style=
                    "text-align: left; width: 352px;" border="1"
                    cellpadding="2" cellspacing="2">
                      <TBODY>

                        <TR>
                          <TD align="undefined" valign="undefined">
                            Menu 3 <INPUT type="button" value="X"
                            onclick="hidemb(bank3);">
                          </TD>
                        </TR>
                        <TR>
                          <TD align="undefined" valign="undefined">
                            Monitor 3
                          </TD>

                        </TR>
                      </TBODY>
                    </TABLE>
                  </TD>
                </TR>
              </TBODY>
            </TABLE>
          </TD>
        </TR>

        <TR align="right">
          <TD valign="undefined">
            <INPUT id="addbutton" type="button" value="ADD"
            onclick="addmb();">
          </TD>
        </TR>
      </TBODY>
    </TABLE>
  </BODY>
</HTML>

**acoder** · Nov 21 '07, 09:20 AM

Originally posted by Liquidtouch

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:
[CODE=javascript] function addmb() {
var table = document.getEle mentById('monit orbank');
var noOfRowsShowing = 0;
var addButton = document.getEle mentById('addbu tton');
var alreadyAdded = false;
for (i=0; i<table.rows.le ngth; i++) {
if (table.rows[i].style.display == "none") {
if (!alreadyAdded) {
table.rows[i].style.display = "";
alreadyAdded = true;
noOfRowsShowing ++;
}
} else {
noOfRowsShowing ++;
}
}
if (noOfRowsShowin g == table.rows.leng th) {
addbutton.style .display = "none";
}
}
[/CODE]

**andho** · Nov 21 '07, 09:23 AM

yes i think i know the problem here. i'll think about this and post a solution

Show/hide rows of a table

Show/hide rows of a table

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment