HOWTO: Control the Rows Displayed in a Table Using a List Box

ID: Q235949

The information in this article applies to:

Microsoft Internet Explorer (Programming) versions 4.0, 4.01, 4.01 SP1, 4.01 SP2, 5

SUMMARY

This article demonstrates how to show or hide table rows based on a list box selection. You can display a single row or multiple rows depending on the number of selections in the list box.

MORE INFORMATION

This section contains sample Jscript code that you can use to toggle the display of a single row, or multiple rows, in a table depending on the choices made in a list box. There are two ways demonstrated in the sample code.

ShowRowName function: This function displays or hides the selected rows based on the name of the row. Use this function when you don't want to toggle the display of all rows.

ShowRowCount function: This function uses the number of the row to control the display value. Use this method when there is a one-to-one and sequential relationship between the entries in the select box and the table rows you wish to toggle the display of.


<HTML>
<HEAD>
<TITLE>HOWTO: Control What Rows Display in a Table using a List Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JScript">
<!--
   function ShowRowName (Rowset)
      {
	var icount;
	for (icount=0; icount < Rowset.length; icount++)
	   {
	      rowName=Rowset.options[icount].value;
	      if (Rowset.options[icount].selected)
	      {
	         TblMain.rows(rowName).style.display="block";
	      }
	      else
	      {
		 TblMain.rows(rowName).style.display="none";
	      }
	   }
      }
	
   function ShowRowCount (Rowset)
      {
         var icount;
	 for (icount=0; icount < Rowset.length; icount++)
	    {
	       if (Rowset.options[icount].selected)
	       {
	          TblMain.rows(icount).style.display="block";
	       }
	       else
	       {
	          TblMain.rows(icount).style.display="none";
	       }
	    }
      }
-->
</Script>
<H1>Display and Hide Table Rows Sample</H1>
	
<P>
   <SELECT Multiple
           SIZE=3 
	   NAME="lstRows">

      <OPTION VALUE = "tblRow1">Row 1
      <OPTION VALUE = "tblRow2">Row 2
      <OPTION VALUE = "tblRow3">Row 3
   </SELECT>

   <INPUT ID=btnShowRowName 
	NAME=btnShowRowName
	TYPE=button 
	VALUE="Show Selected Row by Name"
	onclick=ShowRowName(lstRows)>
	
   <INPUT ID=btnShowRowCount 
	NAME=btnShowRowCount
	TYPE=button 
	VALUE="Show Selected Row by Count"
	onclick=ShowRowCount(lstRows)>
</P>	
	
<TABLE BORDER=1 
	WIDTH="75%" 
	ID="TblMain">
  
   <TR id=tblRow1>
       <TD>Column 1 Row 1</TD>
       <TD>Column 2 Row 1</TD>
       <TD>Column 3 Row 1</TD>
   </TR>
  
   <TR id=tblRow2>
      <TD>Column 1 Row 2</TD>
      <TD>Column 2 Row 2</TD>
      <TD>Column 3 Row 2</TD>
   </TR>
  
   <TR id=tblRow3>
      <TD>Column 1 Row 3</TD>
      <TD>Column 2 Row 3</TD>
      <TD>Column 3 Row 3</TD>
   </TR>
</TABLE>

</BODY>
</HTML>

REFERENCES

For more information regarding Microsoft Scripting Technologies please visit http://msdn.microsoft.com/scripting/.

For more information about Dynamic HTML, authoring with HTML and CSS, and programming with the DHTML object model, please visit http://msdn.microsoft.com/workshop/author/default.asp.

For information regarding the TR element please visit http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/TR.asp.

For specific information regarding display attributes, please visit http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp.

Additional query words: Hide Table Rows Show Display jscript dhtml

Keywords : kbDHTML kbIE400 kbIE401sp1 kbIE401sp2 kbGrpInet kbIE500 kbDSupport
Version : WINDOWS:4.0,4.01,4.01 SP1,4.01 SP2,5
Platform : WINDOWS
Issue type : kbhowto