[HTML/JS] TR display: none; laat toch ruimte over

[Verwijderd]

Ik wil een pagina maken waar diverse rijen (<TR>) gegenereerd worden uit een database. Elke rij heeft zijn eigen ID. Standaard moet de TR ingeklapt zijn, enkel de naam van het item is dan zichtbaar. Als ik dan op de rij klik moet deze "uitvouwen" waardoor meer gegevens over dat item te zien is.

Nu gebruik ik deze code:

code:

<?php foreach($programma as $item): ?>
        <?php $item_id = $item["id"]; ?>

        <tr id="item_<?php echo $item_id ?>_title_disabled" onmousedown="hideelement('item_<?php echo $item_id ?>_title_disabled'); showelement('item_<?php echo $item_id ?>_title_enabled'); showelement('item_<?php echo $item_id ?>_enabled');">
          <td colspan="2">
            <?php echo $item["naam"]; ?> (<?php echo $item["dag"]; ?>-<?php echo $item["maand"]; ?>-<?php echo $item["jaar"]; ?>)
          </td>
        </tr>

        <tr id="item_<?php echo $item_id ?>_title_enabled" style="display: none; background-color: #9FD4FF;" onmousedown="hideelement('item_<?php echo $item_id ?>_title_enabled'); hideelement('item_<?php echo $item_id ?>_enabled'); showelement('item_<?php echo $item_id ?>_title_disabled')">
          <td colspan="2">
            <b><?php echo $item["naam"]; ?> (<?php echo $item["dag"]; ?>-<?php echo $item["maand"]; ?>-<?php echo $item["jaar"]; ?>)</b>
          </td>
        </tr>

        <tr id="item_<?php echo $item_id ?>_enabled" style="display: none;">
          <td style="width: 120px;">
            Test
          </td>
          <td>
            Test
          </td>
        </tr>
      <?php endforeach; ?>

En de volgende functions.js waar showelement en hideelement in zijn gedefinieerd:

code:

function showelement(element) { 
  document.getElementById(element).style.display = 'inline'; 
} 
  
function hideelement(element) { 
  document.getElementById(element).style.display = 'none'; 
}

Wat er u gebeurd hangt van de browser, Safari werkt prima, IE heeft het probleem in mindere mate en Firefox werkt echt niet goed..

Wat er gebeurd: Ik kan de rij openklappen, de "titel"-rij verdwijnt en daarvoor in de plek komen twee rijen waar meer informatie instaat. Bij het inklappen van de rij gaat het mis, de rijen worden wel verwijderd en de originele "titel"-rij komt weer terug maar er komt juist meer ruimte onder de rij. Het gevolg is dus als ik 100 keer die rij inklik, dat de pagina steeds langer wordt met lege rijen.

In firefox is deze ruimte vele malen groter als in IE, in Safari werkt het wel prima...

Ik heb bij showelement ook gebuik gemaakt van block, maar inline lijkt beter te werken...

Ik gebruik display: none omdat visibility: hidden sowieso ruimte overlaat...

[Borizz]

Verander

JavaScript:

function showelement(element) { 
  document.getElementById(element).style.display = 'inline'; 
} 

is in:

JavaScript:

function showelement(element) { 
  document.getElementById(element).style.display = ''; 
} 

of in (let op werkt niet in IE):

JavaScript:

function showelement(element) { 
  document.getElementById(element).style.display = 'table-row'; 
} 

Een table row is namelijk helemaal geen block level element maar heeft standaard de waarde table-row (in normale browsers) voor de css display property.

[Verwijderd]

Damn, zo simpel... je eerste oplossing werkte prima..

Die functie wordt in veel meer pagina's gebruikt, niet alleen voor rijen. Nu ik gewoon niets invulde bij style.display werkte dat ook gewoon nog prima..

Bedankt!