damar's blog: Hide and Show Row in Table Using javascript

Do what you write and write what you do, so i'am going to post about something that I daily do..web programming. Here are codes that assemble from several tutorial about a Hiding and Showing Row in Table Using Javascript:

<html>
<head>
<style type="text/css">
   
   /* This CSS is used for the Show/Hide functionality. */
   .hide {
      display: none;
      }
</style>   
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}

function elementHideShow(elementToHideOrShow,jumlah) 
    {
        for (i=0;i<jumlah;i++)
  {
   j = i + 1;
   var var_id=elementToHideOrShow+j;
   var el = document.getElementById(var_id);
   if (el.style.display == "block") {

el.style.display = "none";
   }
   else 
   {
    el.style.display = "block";
   }
  }
    } 
</script>
</head>
<body>

<a href="#" id="p1-hide" onClick="elementHideShow('hidethis',2);">toggle</a><br /><br />

<table border="1">
<tr>
<td>Always visible1</td>
</tr>
<tr id="hidethis1" class="hide" >
<td>Always visible2</td>
</tr>
<tr id="hidethis2" class="hide">
<td>Always visible3</td>
</tr>
</table>

</body>
</html>

Hopefully it is usefulll....

Labels: Hide and Show row in table useing javascript