How To Control the Rows Displayed in a Table Using a List Box (235949)

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>How To  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.

How To Control the Rows Displayed in a Table Using a List Box (235949)

SUMMARY

MORE INFORMATION

REFERENCES