[JavaScript] For each ID item --> hide it!

[Urk]

Beste Medetweakers,

Jaja, ik heb me al de ***** gezocht...
Het volgende: ik heb een lijst met bijv allemaal users. Iedere user heeft een <tr> binnen de HTML table.
Ik wil dat als ik via JavaScript op de TR/regel klik eronder een TR (die default staat op style="display: none;" verschijnt.
Dat is geen enkel probleem en doe ik via de volgende code:

JavaScript:

document.getElementById('contact_line" & RS("userid") & "').style.display='inline';

Nu het probleem. Ik wil dat als ik op een andere user klik alle overige TR's die dus worden geshowed als je op een user klikt weer hiden.

Met de volgende code:

JavaScript:

document.getElementById('contact_line').style.display='none';

Maar dan moet je de naam weten van het item. Omdat dit variabel door VBScript/ASP word gegenereerd weet ik die dus niet.

Ik had al iets geprobeerd als:

JavaScript:

function testje() {
 for(var i=0; i<document.item.length; i++) {
  document.getElementById('contact_line'+i).style.display='none';
  }
}

Is er een manier om via een soort For Each loop alle namen van die items op te halen? en ze vervolgens te hiden.

Mijn dank is

[BtM909]

Je gebruikt netjes document.getElementById, maar er bestaat ook zoiets als:

document.getElementByTagName('td')

Levert je een array op met alle td's

[Pelle]

2 mogelijkheden:

* houd alle rijen die op display: none; gezet moeten worden bij in een array. Eerst hide je al die tr's en vervolgens show je de juiste.
* maak een variabele aan die de naam van huidige open tr bijhoudt. die doe je eerst dicht bij klik op een volgende rij, open de goede rij en zet de variabele over naar betreffende id.

[Urk]

BtM909 schreef op 09 september 2003 @ 09:40:
Je gebruikt netjes document.getElementById, maar er bestaat ook zoiets als:

document.getElementByTagName('td')

Levert je een array op met alle td's

Aha, dat wist ik niet maar krijg het ook niet werkend, dit werkt bijv al niet:

JavaScript:

<script language="JavaScript">
 alert(document.getElementByTagName('tr'))
</script>

Ik krijg dan op deze regel een "Object doesn't support this property or method"

[Verwijderd]

Ik krijg dan op deze regel een "Object doesn't support this property or method"

Dat komt omdat document.getElementsByTagName('<tag>') een collection terug geeft.

Je krijgt dan een array met objecten. bv.

code:

alert(document.getElementsByTagName('tr')[0].innerHTML);

edit:

Let wel op getElement >s< ByTagName
Die s geeft al aan dat je er meerdere terug kunt krijgen.

[ Voor 23% gewijzigd door Verwijderd op 09-09-2003 09:53 ]

[Urk]

BtM909 schreef op 09 September 2003 @ 09:40:
Je gebruikt netjes document.getElementById, maar er bestaat ook zoiets als:

document.getElementByTagName('td')

Levert je een array op met alle td's

Opzich is dit aardig. Maar ik haal het liefst alleen de TR's op die dus een ID="contact_line[i]" heeft.

[Woudloper]

Urk :: dan zet je toch nog een if statement binnen de for loop waarbij de ID gelijk is aan contact_line is...

[BtM909]

Urk schreef op 09 september 2003 @ 10:01:
[...]

Opzich is dit aardig. Maar ik haal het liefst alleen de TR's op die dus een ID="contact_line[i]" heeft.

2 mogelijkheden:

* je krijgt een array terug. Check dan voordat je je array item aanpast zet, of die tekst erin voorkomt

* zie Pelle's mogelijkheden

[Urk]

Ik heb hem nu aardig

JavaScript:

<script language="JavaScript">
function testje() {
 for(var i=21; i<document.getElementsByTagName("tr").length; i=i+2) {
  document.getElementsByTagName("tr")[i].style.display='none';
  }
 }
</script>

Ik tel nu gewoon de TR vanaf dat de eerste met id=contact_line begint.
Helemaal perfect is als ik alleen die ophaal, dat ga ik nu even proberen...

[RM-rf]

volgens mij is het hier beter om ipv getElementsByTagName de children-collection te gebruiken; de eerste retourneert altijd alle TR in een pagina, terwijl je volgens mij in dit geval gewoon alle childElements van een bepaalde TBODY wilt gebruiken (zeker als je script generiek dient te zijn, is het verschil groot in een toegepastte omgeving)

verder is de display van een TR geen 'inline' maar 'table-row' enkel is dat een waarde die geen enkele browser ondersteund, wel is het beter om dan te defaulten naar 'block' ipv 'inline', dat kan browser-incompatibilities meestal voorkomen; maar dit is verder offtopic en niet direct gerelateerd aan je probleem.

[Urk]

Bedankt voor jullie hulp! Het werkt!

JavaScript:

<script language="JavaScript">
 function testje() {
  for(var i=0; i<document.getElementsByTagName("tr").length; i++) {
   if(document.getElementsByTagName("tr")[i].id.substring(0,12)=="contact_line") {
   document.getElementsByTagName("tr")[i].style.display='none';
  }
 }
}
</script>