I am stuck in tbody cross-browser help. Someone please help

[simpli]

Hi,

I have a table with some total user data and the underlying detail. I want it that when the user click on the summary rows that the table expands to show the underlying data. I am on firefox on a mac. What I do is I use CSS to have all the detail  tbodies to start collapsed:

 

tbody.corps{
display:none;
}

 

On the click event in the summary table rows I have this function, which I have corrected after recommendations from people in this forum. id_tb is a table body id .

function ShowHide(id_tb)
{
   var tablebody = document.getElementById(id_tb)
   if (tablebody.style.display == "block"){
      document.getElementById(id_tb).style.display="none";
   }else{
      document.getElementById(id_tb).style.display="block";
   }
}

 

This code is unfortunately not working. When I use block my summary rows stay the same and the tbody rows expand but at the very bottom of the whole table. Not good. When I use

function ShowHide(id_tb)
{
   var tablebody = document.getElementById(id_tb)
   if (tablebody.style.display == ""){
      document.getElementById(id_tb).style.display="none";
   }else{
      document.getElementById(id_tb).style.display="";
   }
}

nothing happens whatsoever in the onclick event. Can anyone tell me what I am doing incorrectly? I'd like a solution that works cross browser but right now a solution that work in FF would be good for my soul and I could try for cross-browser bliss later. Any help is really welcome cause I'm really stuck.

Thanks,

J-R

[premiso]

Have you checked in the Javascript Error Console Firefox provides, to see what error that is showing?

 

Tools > Error Console

 

You may want to clear it then try and hiding it again and see what it says.

[darkfreaks]

corrected a few minor errors in your problem code:

function ShowHide(id_tb)
{
   var tablebody = document.getElementById(id_tb);
   if (tablebody.style.display === ""){
      document.getElementById(id_tb).style.display="none";
   }else{
      document.getElementById(id_tb).style.display="";
   }
}

[simpli]

There is no error message, the code executes. It just doesn't do anything. Darkfreaks: If I understand what you do, you check if the variable passed in parameter is the right type but I'm supposed to pass the id of the tbody and that's what I do no?

[darkfreaks]

=== is preffered over == and makes sure  it equals something exactly.

 

 

also

 display:table 

would work

Try:

function ShowHide(id_tb)
{
   var tablebody = document.getElementById(id_tb);
   if (tablebody.style.display === "table"){
      document.getElementById(id_tb).style.display="none";
   }else{
      document.getElementById(id_tb).style.display="table";
   }
}

[xtopolis]

redacted

[simpli]

redacte? What does that mean??

[xtopolis]

I was going to respond, but my statement was incorrect.  Ignore me