Skjul rækker

Hrm, umiddelbart ligner det noget i den retning, vi i går diskuterede her: http://exp.dk/spm/654592 !-)

-- men jeg har ikke helt forstået, hvor det lille billede skulle findes ?-)

Har lidt problemer når det er flere rækker der skal skjules.
<script type="text/javascript">
var oldElm = null;
function showHide(elm){
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  var state = elm.style.display != 'block';
  if(oldElm)
    oldElm.style.display = 'none';
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  elm.style.display = state ? 'block' : 'none';
  oldElm = elm;
}
</script>
<style type="text/css">
{border-collapse:collapse;width:500px;border:1px solid black;text-align:center;}
tr{border:1px solid black;cursor:pointer;}
.hidTr{display:none;}
</style>       

<table>

<tr onclick="showHide('tr1');"><td >tester</td></tr>
<tr id="tr1" class="hidTr" ><td>Gemmes</td></tr>
<tr id="tr1" class="hidTr"><td>Gemmes2</td></tr>

</table>

Ja, så skal der tænkes anderledes, for et id må kun optræde en gang i samme dokument (ligesom cpr-numre kun må findes een gang !-)

-- hvis du ikke vil have click-funktionen på de elementer, du viser, kan du f.eks.:

<script type="text/javascript">
var oldElms = null;
function showHide(elm){
  var args = showHide.arguments;
  var state = !document.getElementById(args[0]).style.display;
  if(oldElms){
    for(i=0;oldElms.length>i;i++){
      document.getElementById(oldElms[i]).style.display = 'none';
    }
  }
  for(i=0;args.length>i;i++){
    document.getElementById(args[i]).style.display = state ? 'none' : '';
  }
  oldElms = args;
}
</script>

<style type="text/css">
body{font-family:verdana,sans-serif;font-size:large;}
#minTabel{border-collapse:collapse;width:500px;border:1px solid black;text-align:center;}
#minTabel tr{display:table-row;}
#minTabel td{border:1px solid black;cursor:pointer;}
#minTabel .hidTr{background-color:#ccc;}
</style>

<table id="minTabel">
  <tr>
    <td onclick="showHide('tr1a','tr1b','tr1c');">Her er et link mere.</td>
  </tr>
  <tr id="tr1a" class="hidTr" style="display:none;">
    <td>Som åbner en celle.</td>
  </tr>
  <tr id="tr1b" class="hidTr" style="display:none;">
    <td>Som åbner en celle.</td>
  </tr>
  <tr id="tr1c" class="hidTr" style="display:none;">
    <td>Som åbner en celle.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr2a','tr2b');">Se hvordan her.</td>
  </tr>
  <tr id="tr2a" class="hidTr" style="display:none;">
    <td>Her er en forklaring på hvordan.</td>
  </tr>
  <tr id="tr2b" class="hidTr" style="display:none;">
    <td>Her er en forklaring på hvordan.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr3');">En anden tekst som man kan klikke på.</td>
  </tr>
  <tr id="tr3" class="hidTr" style="display:none;">
    <td>Her er et link mere.</td>
  </tr>
</table>

Er bare fordi jeg kender ikke de efterkommende id'er da det hele køre i en rekursiv metode som udskriver menuen.

-- og så skal vi nok fjerne hånden fra de skjulte rækker:

Erstat #minTabel .hidTr-reglen med:

#minTabel .hidTr td{background-color:#ccc;cursor:default;}

-- hvordan ser et eksempel ud, så kan vi jo prøve at finde en metode, f.eks. via noget DOM-adressering (nextSibling plus check på klasse !-)

function makesub($idorg,$tomme)
{
$res = mysql_query("SELECT * FROM menu WHERE submenu=$idorg order by nummer");
while($row = mysql_fetch_array($res) )
{
extract($row);
$picbrede=$tomme*14;
?>
<tr style="cursor:hand" ><td class="border1" <?=$markering?> >&nbsp;&nbsp;</td><td class="border2" onclick="location.href='retnyhed.php?id=<?=$nyhedid?>'"><img height="1" width="<?=$picbrede?>" src="cms_img/tommenu.gif" /><img src="cms_img/cross.gif" /><img src="cms_img/paper.gif" />&nbsp;<?=$tekst?></td></tr>
<?
    if(moresubs($id)>0)
    {
    $tommenext=$tomme+1;
    makesub($id,$tommenext);
    }
}
}

er den som udskriver listen med menuen

lukker