Change the class of the tr element dynamically

[bean1234]

Hello Expets,

I am applying the following cs to teh table rows and tds which are under a table with class name "subparent"

.subparent tr.subhidden td  {

         padding:3px 0px 3px 10px;background-color:#ffffff;display: none;
}

.subparent tr.subshow td {
     padding:3px 0px 3px 10px;background-color:#ffffff;display: block;
     
}

I dynamically chnage the className using the following javascript code

function toggleit(parentDiv,imageElement,imgName1,imgName2){

 var temp = parentDiv.nextSibling
 //parent div is actually the tr above the tr I am trying to chnage the className of.
 //temp is the tr of teh table
 
 
 
 if(temp.className == "subhidden"){
  
  alert('Equal to subhidden');
  temp.className = "subshow";
  alert('Changed to '+temp.className)
  
  }
  
  else{

  alert('Equal to subshow');
  temp.className = "subhidden";
  alert('Changed to '+temp.className)

  
  }
  
  
  imageElement.src=(imageElement.src.indexOf(imgName1) == -1) ?imgName1:imgName2;
  parentDiv.focus();

 }

Everything works fine if I start from "subshow" as the initial class of the tr the tr is displayed initially and hidden on click, howoever if I start from "subhidden" class for the tr and it is hidden and never goes back to show to tr again even though I have confirmed that the the className chnages to "subshow", can you please let me know what the problem might be?

Thanks.

 

[bean1234]

Anybody??

 

[BillyRayPreachersSon]

Have you tried hiding the whole row? Or maybe using "display:table-cell" instead of "display:block"?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bean1234]

I was able to hide but I am not able to show it back even if I use the display:block. Thanks.

 

[bean1234]

I mean even if I use "display:table-cell" I am still not able to show it back.

 

[adam0101]

It's because through your style sheet you've defined the style of the TD. You're toggling the display of the row, but the display of the TD is still set to 'none'.

Change your style sheet to this:

.subparent tr td {

     padding:3px 0px 3px 10px;background-color:#ffffff;
}

.subparent tr.subshow{
     display: block;

}

.subparent tr.subhidden{
	display: none;
}

Adam

http://adameslinger.blogspot.com/

 

[kaht]

Hey Adam, it's been a while!

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[adam0101]

Yes, it has. I got a job that I actually enjoy doing - so I don't spend nearly as much time here as I have in the past.

Adam

http://adameslinger.blogspot.com/

 

[kaht]

Going by that formula, it proves that I really hate my job

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]