Results 1 to 3 of 3

Thread: Toggle table-row, FireFox ignoring colspan

  1. #1
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default Toggle table-row, FireFox ignoring colspan

    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:

    Code:
    <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:

    HTML Code:
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    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!!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •