DOM Tables in DHTML

[Total: 0    Average: 0/5]

This will hide and show tables.

Body Code:

<script>
/*
 * Determine which web browser we have here.
 */
var isIE=document.all?true:false; /* IE4, IE5, IE6 */
var isDOM=document.getElementById?true:false; /* IE6, NS6 */

/*
 * Function SH :: SHOW HIDE
 * Paramter: _objName - name of the object to hide or show
 *           _formObj - object that was clicked.
 */
function SH(_objName,_formObj)
{
  /*
   * This creates an object inside the object passed to it.
   * It retains the state of show or hide.
   * This works when the check box is by default not checked.
   * (FIRST CLICK CHECKS AND MAKES DIV SHOW UP)
   */
  _formObj._show=_formObj._show?false:true;
  
  /*
   * Determine web browser type, then if to show or hide.
   */
  if(isDOM)
  {
    if(_formObj._show)
      document.getElementById(_objName).style.visibility="visible";
	else
      document.getElementById(_objName).style.visibility="hidden";
  }
  else if(isIE)
  {
    if(_formObj._show)
      eval("document.all."+_objName+".style.visibility='visible'");
    else
      eval("document.all."+_objName+".style.visibility='hidden'");
  }
}
</script>
<form name=f1>
<table border=1>
<tr><td>Name</td><td>Show</td></tr>
<tr><td>A</td>
	<td><input onclick="SH('div_a',this);" type=checkbox></td></tr>
<tr><td>B</td>
	<td><input onclick="SH('DIV_B',this);" type=checkbox></td></tr>
<tr><td>C</td>
	<td><input onclick="SH('DIV_C',this);" type=checkbox></td></tr>
</table>
</form>
<HR>
<div id='div_a' style="visibility:hidden;">
<table border=1>
<tr><td>A-1-1</td><td>A-1-2</td></tr>
<tr><td>A-2-1</td><td>A-2-2</td></tr>
<tr><td>A-3-1</td><td>A-3-2</td></tr>
</table>
</div>

<div id='DIV_B' style="visibility:hidden;">
<table border=1>
<tr><td>B-1-1</td><td>B-1-2</td></tr>
<tr><td>B-2-1</td><td>B-2-2</td></tr>
<tr><td>B-3-1</td><td>B-3-2</td></tr>
</table>
</div>

<div id='DIV_C' style="visibility:hidden;">
<table border=1>
<tr><td>C-1-1</td><td>C-1-2</td></tr>
<tr><td>C-2-1</td><td>C-2-2</td></tr>
<tr><td>C-3-1</td><td>C-3-2</td></tr>
</table>
</div>

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *