making a table row appear and disappear

Posted on 2003-02-26
Medium Priority
Last Modified: 2007-12-19
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.
Question by:locc
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2

Accepted Solution

KodyBrown earned 100 total points
ID: 8030242
      <TITLE>Q_20531244.html (show and hide rows and columns)</TITLE>
      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;
<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";
      <FORM id="frm" name="frm">
            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 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>
            <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 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 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 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>

Expert Comment

ID: 8030277
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.


Author Comment

ID: 8038259
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.

Author Comment

ID: 8703230
do you know how to make a whole table disappear ??

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question