Jump to content

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


simpli

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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="";
   }
}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

=== 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";
   }
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.