[javascript/html] hide/show column: IE = OK, FF != OK

[Verwijderd]

Hoi,

Ik heb een tabel waarvan ik een kolom wil kunnen verbergen en weer wil laten tonen aan de hand van links. Dit is gelukt, maar het werkt niet helemaal goed. Het werkt goed in IE, maar in Firefox ontstaat er een probleem met de regel die colspan gebruikt. Volgens mij ziet Firefox de verborgen kolom namelijk nog als kolom waardoor er een ongewenst grote whitespace ontstaat tussen de kolommen. Switch een aantal keer tussen 'hide' & 'show' en je ziet de tabel groter worden. Ik heb al gegoogled en vanalles geprobeerd, maar ik kom er niet uit. Is er misschien iemand die hier een oplossing voor weet. Bekijk de code in IE en je ziet hoe het moet worden. Ik wil echter dat het ook in Firefox gaat werken.

Alvast bedankt voor jullie hulp.

HTML:

<script type="text/javascript">
function show(el)
{
    var bool = true;
       for (var i = 0; bool; i++) {
          var elt = document.getElementById(el+i);
          if (elt != null) {
            if (elt.style)
            {
              elt.style.display = 'block';
            }
          } else {
            bool = false;
          }
        }

var cols = document.getElementById('cols').getElementsByTagName('td');

document.getElementById('row2').colSpan = cols.length;
    return ;
}

function hide(el)
{
    var bool = true;
       for (var i = 0; bool; i++) {
          var elt = document.getElementById(el+i);
          if (elt != null) {
            if (elt.style)
            {
              elt.style.display = 'none';
            }
          } else {
            bool = false;
          }
        }

var cols = document.getElementById('cols').getElementsByTagName('td');
var j = 0;
for(i = 0; i < cols.length; i++){
    if (cols[i].style.display == '') j++ ;
}

document.getElementById('row2').colSpan = j;
    return ;
}
</script>

<a href="javascript: hide('kol')">hide</a> | 
<a href="javascript: show('kol')">show</a>

<hr>

<table border=1 cellpadding=5 cellspacing=10>
  <tr id='cols'>
    <td>col1</td>
    <td id='kol0'>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td id='row2'>test</td>
  </tr>
  <tr>
    <td>col1</td>
    <td id='kol1'>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td id='kol2'>col2</td>
    <td>col3</td>
  </tr>
</table>

<script type="text/javascript">
show('kol');
</script>

[Zyppora]

Hier wat tips:

- Gebruik [code=html] tags, ipv [code] tags, dat maakt het geheel wat overzichtelijker.
- Wees consistent in je HTML (ik zie tags met attributen zonder quotes, met single quotes en met double quotes).
- Waarom display = 'block' gebruiken als je met table columns werkt? Zie hier.

[Verwijderd]

Zyppora schreef op woensdag 24 januari 2007 @ 15:12:
Hier wat tips:

- Gebruik [code=html] tags, ipv [code] tags, dat maakt het geheel wat overzichtelijker.
- Wees consistent in je HTML (ik zie tags met attributen zonder quotes, met single quotes en met double quotes).
- Waarom display = 'block' gebruiken als je met table columns werkt? Zie hier.

Bedankt voor je suggesties

Ik heb de code aangepast

Ik gebruik geen columns, althans niet zoals het misschien zou kunnen. Ik had ze er nog in staan na een test, maar heb ze nu verwijderd.

[Verwijderd]

Zyppora schreef op woensdag 24 januari 2007 @ 15:12:

- Waarom display = 'block' gebruiken als je met table columns werkt? Zie hier.

Opgelost, bedankt!

Ik heb

HTML:

elt.style.display = 'block';

vervangen door:

HTML:

elt.style.display = 'table-cell';

[XWB]

Een tabel is idd geen block element. Handig: http://vzone.virgin.net/sizzling.jalfrezi/stylelem.htm

Verder, als je dit doet:

JavaScript:

elt.style.display = '';

Dan zal de browser de standaard waarde toekennen.

[Verwijderd]

Hacku schreef op woensdag 24 januari 2007 @ 15:44:
Een tabel is idd geen block element. Handig: http://vzone.virgin.net/sizzling.jalfrezi/stylelem.htm

Verder, als je dit doet:

JavaScript:

elt.style.display = '';

Dan zal de browser de standaard waarde toekennen.

Ja, werkt ook! tnx

[crisp]

Je rare for-construct kan je overigens ook zo schrijven:

JavaScript:

var elt, i = 0;
while ((elt = document.getElementById(el+i)))
{
    elt.style.display = '';
    i++;
}

[XWB]

En korter:

JavaScript:

var elt, i = 0;
while ((elt = document.getElementById(el+i++)))
{
    elt.style.display = '';
}

[crisp]

pfft, doe het dan in een for - dan heb je maar 1 regel nodig
Ik maak toch meestal nog wel een afweging tussen leesbaarheid en korte syntax