flere style:display

har ændret lidt, prøv den her ;)

<script type="text/javascript">
function toggle(){
  e = document.getElementsByTagName('div');
 
  for(i=0;i<e.length;i++){
    if (e[i].id == "a"){
        e[i].style.display = "inline";
    }
  }
  }
</script>

<div id="a" style="display : none;">
<tr>
  <td>hej</td>
</tr>
</div>

<div id="a" style="display : none;">
<tr>
  <td>dav</td>
</tr>
</div>

<div id="a" style="display : none;">
<tr>
  <td>wee</td>
</tr>
</div>


<a href="#" onclick="toggle('a');">vis</a>

functionen skal sefølgelig se sådan ud ;)

<script type="text/javascript">
function toggle(d){
  e = document.getElementsByTagName('div');
 
  for(i=0;i<e.length;i++){
    if (e[i].id == d){
        e[i].style.display = "inline";
    }
  }
  }
</script>

Her er en generisk funktion, der kan "toggle" rækker på en hvilken som helst tabel. Kald funktionen med tre parametre: 1. id på tabellen, 2. nummeret på den første række, der skal "toggles" (første række er nummer 0), samt 3. antal rækker i alt:

<script>

function toggleRows(strTableId,intStart,intNumber) {
  var oTbl = document.getElementById(strTableId);
  var oRow;
  if (oTbl == null) return;
  for (var i=intStart; i<=intStart+intNumber-1; i++) {
    oRow = oTbl.rows(i);
    if (oRow != null) oRow.style.display = (oRow.style.display == 'none') ? 'block' : 'none';
    }
}

</script>


I dit tilfælde kan du altså blot give tabellen et id (hvis ikke den har et i forvejen), finde nummeret på den første række, f.eks. 0, og kalde funktionen sådan her for vise/skjule de 3 rækker:

<a href="#" onclick="toggleRows('tabel_id',0,3);">vis</a>

Grunken - dit eksempel er faktisk godt, der er bare det problem, at hvis man sætter <table></table> rundt om, så vil den ikke :/

Grunken - svar...

Sådan ser det ud:


</html>


<script type="text/javascript">
function toggle(d){
  e = document.getElementsByTagName('tr');
 
  for(i=0;i<e.length;i++){
        e[i].style.display = "none";
  }

  for(i=0;i<e.length;i++){
    if (e[i].id == d){
        e[i].style.display = "inline";
    }
  }
  }
</script>


<table>
  <tr id="a" style="display : none;">
    <td>hej</td>
  </tr>
  <tr id="a" style="display : none;">
    <td>dav</td>
  </tr>
  <tr id="a" style="display : none;">
    <td>wee</td>
  </tr>
  <tr id="b" style="display : none;">
    <td>s</td>
  </tr>
  <tr id="b" style="display : none;">
    <td>s</td>
  </tr>
  <tr id="b" style="display : none;">
    <td>sdh</td>
  </tr>
</table>

<a href="#" onclick="toggle('a');">vis</a>
<a href="#" onclick="toggle('b');">vis</a>

</html>

svar ;D

fik du det hele til at du ?

Jeps, nu er der bare det problem, at når jeg folder én ud, må den gerne folde den anden sammen. Derfor prøver jeg lige:

function toggle(d){
  e = document.getElementsByTagName('tr');
 
  for(i=0;i<e.length;i++){
        e[i].style.display = "none";
  }

  for(i=0;i<e.length;i++){
    if (e[i].id == d){
        e[i].style.display = "inline";
    }
  }
  }

Nu er der så bare det problem, at alle <TR> på hele siden skjuler sig - ikke så fedt. Nogen idé?

>>id _skal_ være unikt !-)

-- så det er ugyldig kode at sætte id på flere elementer til det samme, men det kan da også hurtigt klares med id="a1", a2, a3 osv.

-- og så f.eks.:

    if (e[i].id.indexOf(d)>-1){

hvad hedder de tr's du skal skjule, har de alle et unikt navn a,b,c o.s.v

Det bliver bare sådan:

  e = document.getElementsByTagName('tr');
 
  for(i=0;i<e.length;i++){
    if (e[i].id == 'ae' || e[i].id == 'fj'){
        e[i].style.display = "none";
    }
  }

  for(i=0;i<e.length;i++){
    if (e[i].id == d){
        e[i].style.display = "inline";
    }
  }
  }

tak for points ;)

Selv tak :)