PDA

View Full Version : Toggle table-row, FireFox ignoring colspan



the penguin
07-16-2010, 01:58 PM
Hello, I'm using the below code to toggle show / hide a table row, but firefox is ignoring the colspan="2". Perhaps someone can help me in altering the javascript. I appreciate the help!

SCRIPT:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = 'block';
break;
case 'block' :
img.src = 'icon_plus.gif';
el.style.display = 'none';
break;
default:
img.src = 'icon_minus.gif';
el.style.display = 'block';
break;
}
}
</script>

HTML:


<table>
<tr>
<td>Email Address</td>
<td>aaaaaaa@aa.com <img src="icon_plus.gif" border="0" id="1_img" /> <a href="javascript:toggle('1')">Change email address</a></td>
</tr>
<tr style="display:none;background-color:#DDE1EA;" id="1">
<td colspan="2">data to change email address</td>
</tr>
</table>

jscheuer1
07-16-2010, 04:13 PM
The native/default style display value for a seen tr element technically is not 'block'. It's 'table-row'. But using that may confuse IE.

However, by setting the display property to an empty string, one may allow it to revert to whatever the browser considers to be its default value:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = '';
break;
case '' :
img.src = 'icon_plus.gif';
el.style.display = 'none';
break;
default:
img.src = 'icon_minus.gif';
el.style.display = '';
break;
}
}
</script>

This may be condensed:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = '';
break;
default:
img.src = 'icon_plus.gif';
el.style.display = 'none';
}
}
</script>

the penguin
07-16-2010, 05:46 PM
Amazing!

I knew table-row was the default display, but had no idea that leaving the display blank would allow each browser to choose.

Works like a charm now.

Thank you John!!!