Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 467
  • Last Modified:

making a table row appear and disappear

Can anyone help with this...
I need to know how to make a table row appear on a onchange() event from a drop down box.
On certain values I want to make certain rows appear and others disappear.
0
locc
Asked:
locc
  • 2
  • 2
1 Solution
 
KodyBrownCommented:
<HTML>
<HEAD>
      <TITLE>Q_20531244.html (show and hide rows and columns)</TITLE>
      <STYLE>
      body {
            font-family: Verdana, Tahoma, Arial;
            font-size: x-small;
            font-weight: bold;
            letter-spacing: 1px;
      }
      select {
            font-family: Tahoma, Arial;
            font-size: x-small;
            font-weight: normal;
            border: 1px inset;
      }
      td {
            font-family: Tahoma, Arial;
            font-size: x-small;
            font-weight: normal;
            padding: 4px;
      }
      </STYLE>
</HEAD>
<BODY onload="update();">
      <SCRIPT language="JavaScript">
      <!--
      var objs = new Array();
      
      function update() {
            // if you already hid a row or columns, show'em
            if (objs.length > -1) {
                  for (var i=0; i<objs.length; i++) {
                        objs[i].style.display = "block";
                  }
            }
            
            if (document.getElementById("cboSelect").value > -1) {
                  var id = "";
                  
                  if (document.getElementById("cboMethod").value == 0) {
                        // hide the whole row at a time
                        id = "row" + document.getElementById("cboSelect").value;
                        
                        objs = new Array();
                        objs[0] = document.getElementById(id);
                        objs[0].style.display = "none";
                  } else if (document.getElementById("cboMethod").value == 1) {
                        // hide each column in the row, individually
                        id = "row" + document.getElementById("cboSelect").value;
                        
                        objs = new Array();
                        objs[0] = document.getElementById(id + "col0");
                        objs[0].style.display = "none";
                        objs[1] = document.getElementById(id + "col1");
                        objs[1].style.display = "none";
                        objs[2] = document.getElementById(id + "col2");
                        objs[2].style.display = "none";
                        objs[3] = document.getElementById(id + "col3");
                        objs[3].style.display = "none";
                        
                        // if you are hiding all columns in the row,
                        // don't forget to hide the row itself.
                        objs[4] = document.getElementById(id);
                        objs[4].style.display = "none";
                  } else if (document.getElementById("cboMethod").value == 2) {
                        // hide the individual column in each row
                        id = "col" + document.getElementById("cboSelect").value;
                        
                        objs = new Array();
                        objs[0] = document.getElementById("row0" + id);
                        objs[0].style.display = "none";
                        objs[1] = document.getElementById("row1" + id);
                        objs[1].style.display = "none";
                        objs[2] = document.getElementById("row2" + id);
                        objs[2].style.display = "none";
                        objs[3] = document.getElementById("row3" + id);
                        objs[3].style.display = "none";
                  }
            }
      }
      //-->
      </SCRIPT>
      <FORM id="frm" name="frm">
            <P>
            Hide by Row or Columns<BR/>
            <SELECT id="cboMethod" name="cboMethod" size="1" onchange="update();">
                  <OPTION value="0">hide row</OPTION>
                  <OPTION value="1">hide rows by column</OPTION>
                  <OPTION value="2">hide columns</OPTION>
            </SELECT>
            
            <P>
            Select Row/Column to Hide<BR/>
            <SELECT id="cboSelect" name="cboSelect" size="1" onchange="update();">
                  <OPTION value="-1">none</OPTION>
                  <!--<OPTION value="0">header</OPTION>-->
                  <OPTION value="1">row/column one</OPTION>
                  <OPTION value="2">row/column two</OPTION>
                  <OPTION value="3">row/column three</OPTION>
            </SELECT>
            
            <P>
            <TABLE border="1" cellpadding="0" cellspacing="4" style="background-color:steelblue;">
                  <TR id="row0">
                        <TD id="row0col0" style="width:50px; background-color:lightsteelblue;">&nbsp;</TD>
                        <TD id="row0col1" style="width:50px; background-color:lightsteelblue;">col 1</TD>
                        <TD id="row0col2" style="width:50px; background-color:lightsteelblue;">col 2</TD>
                        <TD id="row0col3" style="width:50px; background-color:lightsteelblue;">col 3</TD>
                  </TR>
                  <TR id="row1">
                        <TD id="row1col0" style="width:50px; background-color:lightsteelblue;">row 1</TD>
                        <TD id="row1col1" style="width:50px; background-color:red;">&nbsp;</TD>
                        <TD id="row1col2" style="width:50px; background-color:red;">&nbsp;</TD>
                        <TD id="row1col3" style="width:50px; background-color:red;">&nbsp;</TD>
                  </TR>
                  <TR id="row2">
                        <TD id="row2col0" style="width:50px; background-color:lightsteelblue;">row 2</TD>
                        <TD id="row2col1" style="width:50px; background-color:green;">&nbsp;</TD>
                        <TD id="row2col2" style="width:50px; background-color:green;">&nbsp;</TD>
                        <TD id="row2col3" style="width:50px; background-color:green;">&nbsp;</TD>
                  </TR>
                  <TR id="row3">
                        <TD id="row3col0" style="width:50px; background-color:lightsteelblue;">row 3</TD>
                        <TD id="row3col1" style="width:50px; background-color:blue;">&nbsp;</TD>
                        <TD id="row3col2" style="width:50px; background-color:blue;">&nbsp;</TD>
                        <TD id="row3col3" style="width:50px; background-color:blue;">&nbsp;</TD>
                  </TR>
            </TABLE>
      </FORM>
</BODY>
</HTML>
0
 
KodyBrownCommented:
Sorry, I forgot to post some information about it.

This provides three ways to remove td's: by the row, individual td's within a row (horizontally), and td's in the same column (vertically).

This code assumes you know the number of rows and columns.

Kody
0
 
loccAuthor Commented:
Thanks it works good, I had to make a few minor adjustments because I only need to do the whole row rather than column and row.  Thanks.
0
 
loccAuthor Commented:
do you know how to make a whole table disappear ??
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now