Javascript to hide/show table rows working fine with FF, IE8 but fails in IE 7

[rabindrapandey]

Hi, I have a javascript which works fine with FF & IE8 but in IE 7 it fails. Can some one help me understand where this all is going wrong? I am not javascript expert but just manage to write some code after learning through tutorials on the net.

Here is the javascript code -

function HideShowSqr(val,thisname)
{
	select_value = val.value;
	var trs=document.getElementsByTagName('TR');
	for (i=0;i<trs.length;i++){
		if(trs[i].getAttribute(thisname)){
		   if((trs[i].getAttribute(thisname) == 'sqr')){
				if( select_value == 'no'){
				  trs[i].style.display = 'none';
				}
				else{
					trs[i].style.display = 'table-row'; 
				}
		   }
		}  
	}
}

HideShowSqr is called by radio change event in the form-

<input type="radio" value="yes" name="sun_quote_ref" id="sun_quote_ref" onClick="HideShowSqr(this,'sqr');">&nbsp;&nbsp;Yes &nbsp;
<input type="radio" value="no" name="sun_quote_ref" id="sun_quote_ref" onClick="HideShowSqr(this,'sqr');">&nbsp;&nbsp;No

Rows that need to be hidden/shown are coded like this-

<tr id="hide1" sqr="sqr">
<td class="columncaption" style="text-align: right;" valign="top"><div class="pad5x10">Configuration Cart:</td>
<td class="yellow1"><div class="pad5x10"><input type="text" name="Configuration_Cart" id="Configuration_Cart"  value="" size="40"></td></tr>
<tr id="hide1" sqr="sqr">
<td class="columncaption" style="text-align: right;" valign="top"><div class="pad5x10">Quote Reference:</td>
<td class="yellow1"><div class="pad5x10"><input type="text" name="Sun_Quote_Reference" id="Quote_Reference"  value="" size="40"></td></tr>

Can someone tell me how I can get this working in IE 7 please? Your help is much appreciated.

[larztheloser]

Does it work if you change "display = 'none'; " to "visibility = 'hidden'; "? I've had some problems with the display attribute in the past.

[rabindrapandey]

It does not make any difference.

I believe (may be wrong) problem lies with -

trs[i].style.display = 'table-row';

Also somewhere I saw that there was an jacascript related issue with IE7 that was fixed in IE8

[larztheloser]

Could you change that to a nothing? That is, "display = ''; ".

Many JavaScript issues were resolved in IE8 but I don't think it was anything to do with this.

[drhowarddrfine]

This has nothing to do with javascript then and everything to do with css.

table-row has never worked in IE7. As a side note, IE8 does not work like IE7 compatibility mode which doesn't work like IE7 which doesn't work like IE6 which is reason #147 why no one should ever use IE and it needs to die a quick death.

[acoder]

I think "block" works in IE7, but that's not correct for modern browsers. The solution proposed by larz should work because it should default to the default in each browser.