[JS / HTML] Table rows in- en uitklappen. - Softwareontwikkeling

maandag 22 december 2003 17:23

Acties:

Topicstarter

Hoi iedereen,

Ik ben bezig met een pagina met daarin een table. Van die table wil ik een aantal rows kunnen in en uitklappen.

Een div wel / niet laten zien is niet zo'n probleem met het stukje code dat ik op GoT gevonden heb:

code:

<html>
<head>
<title>klapcode</title>
<script type="text/javascript">
function toggleDiv (id) {
    var ele = document.getElementById (id);
    ele.style.display = (ele.style.display=='block') ? 'none' : 'block';
}
</script>
</head>
<body>


<div onclick="toggleDiv('blokkie')" style="background-color:#DDDDDD;width:300px;">
toggleDiv (klik hier)</div>

<div id="blokkie" ="background-color:#EEEEEE;width:300px;display:none;">
<table>
 <tr>
  <td>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
  </td>
 </tr>
</table>
</div>

</body>
</html>

Dat werkt prima. maar een div in een table mag niet, dus ik kan niet de div om de rows heenzetten. Het werkt dan niet meer.

De rows het id "blokkie" meegeven werkt ook niet goed, ik moet namelijk meerdere rows met 1 klik kunnen laten verdwijnen en hij pakt slechts de eerste row met het id "blokkie".

Nu is mijn vraag aan jullie, is er één of andere manier om die rows toch in en uit te kunnen klappen?

Het gegeven voorbeeld staat trouwens hier:
http://soulz.org/~saviour/test.htm

maandag 22 december 2003 17:26

Acties:

disjfa

be

saviour schreef op 22 december 2003 @ 17:23:
maar een div in een table mag niet

van wie niet? zolang je de div in een td / th block zet maakt het niet uit.

een netere manier is om dit zonder tables maar alleen divjes te doen. behalve als het om tabulaire data gaat, dan wel een table maar die weer nesten in een div

disjfa - disj·fa (meneer)
disjfa.nl

maandag 22 december 2003 17:26

Acties:

crisp

Devver

Pixelated

Ik zou zeggen: bekijk de index van het forum eens goed, of check je myReact

Intentionally left blank

maandag 22 december 2003 17:28

Acties:

saviour

Topicstarter

crisp schreef op 22 december 2003 @ 17:26:
Ik zou zeggen: bekijk de index van het forum eens goed, of check je myReact

Hmm, ok.. Die index heb ik al geprobeerd maar dat is zo'n warboel

Dus een div mag wél in een table? Dan ga ik nu eerst maar eens even in myreact kijken en dan proberen mijn hele template om te gooen.

Ik laat nog wat van me horen, merci.

maandag 22 december 2003 17:32

Acties:

crisp

Devver

Pixelated

de in-uitklap code hier @ GoT werkt met een custom attribuut op de TR's; doormiddel van een getElementsByTagName kan je door al je TR's heen fietsen; met getAttribute() kan je bepalen of dat custom attribuut bestaat en welke waarde die heeft, aan de hand daarvan kan je 'm op display:none of display:table-row zetten

Intentionally left blank

maandag 22 december 2003 17:32

Acties:

Verwijderd

je kan ook de rows gewoon op display: none zetten en weer op display: block, werkte bij mij prima (in ie, nog niet getest ergens anders)

maandag 22 december 2003 17:35

Acties:

Verwijderd

style.display kan op elk HTML-element worden toegepast, niet alleen op DIVs.

@mophor: eigenlijk moet een TR natuurlijk op display:table-row...

weet alleen niet hoe de verschillende browsers daarop reageren...

[ Voor 48% gewijzigd door Verwijderd op 22-12-2003 17:36 ]

maandag 22 december 2003 17:38

Acties:

crisp

Devver

Pixelated

tr.style.display = null; dan neemt een browser als het goed is de default

Intentionally left blank

maandag 22 december 2003 17:39

Acties:

saviour

Topicstarter

Verwijderd schreef op 22 december 2003 @ 17:32:
je kan ook de rows gewoon op display: none zetten en weer op display: block, werkte bij mij prima (in ie, nog niet getest ergens anders)

Ik kon het ook wel direct op de row toepassen, alleen werkte het dan niet bij meerdere rows (bij mij).

Als ik alle rows hetzelfde id geef, pakt hij alleen de eerste mee.

@crisp, ik vind de code hier maar erg onduidelijk om te lezen

Ik heb nu trouwens een iets andere functie, van jou geript

Maar ik zal wel eens verder zoeken hoe ik alle rows kan doorlopen

maandag 22 december 2003 17:40

Acties:

disjfa

be

saviour schreef op 22 december 2003 @ 17:39:
[...]
Als ik alle rows hetzelfde id geef, pakt hij alleen de eerste mee.

dat is ook heel het probleem

id`s moeten uniek zijn.

je zou wel die table die je in die div hebt staan het id van de div mee kunnen geven en de div helemaal weghalen

owja... wat crisp bedoelt is door heel de code heen banjere (getElementByTagNames("tr");)en als ej bij de tr bent die waar je op geklikt hebt dan zet je een flag aan dat ie de volgende op display = block of null zet tot ie bij het volgende onlinende element bent zodat die de flag weet uitzet

klinkt ingewikkeld, is t eigenlijk niet

[ Voor 33% gewijzigd door disjfa op 22-12-2003 17:42 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 22 december 2003 17:44

Acties:

saviour

Topicstarter

Achso, nu klinkt het idd al een stuk makkelijker.

Ik denk dat het voor mij het makkelijkste is om mijn hele template om te gooien. Het gaat bij mij ook om een forumpje waar ik al heel lang soms wat aan pruts.

Dus dan zet ik de subforums in een aparte table, lijkt mij eigenlijk het makkelijkste om nu te doen. Dan hoef ik alleen die table te laten verdwijnen.

maandag 22 december 2003 18:49

Acties:

BetuweKees

Flipje uit Tiel

ik gebruik meestal zo iets:

code:

1 2	try { document.getElementById(myObjId).style.display = "table-row"; } catch(e) { document.getElementById(myObjId).style.display = "block"; }

werkt prima, en mocht ie in de toekomst besluiten nog eens die table-* display types the ondersteunen blijft t goed gaan. met .getAttribute() is nog net iets netter natuurlijk, maar dit werkt ook prima

Through meditation I program my heart to beat breakbeats and hum basslines on exhalation -Blackalicious || *BetuweKees was AFK; op de fiets richting China en verder

maandag 22 december 2003 19:01

Acties:

crisp

Devver

Pixelated

BetuweKees schreef op 22 december 2003 @ 18:49:
ik gebruik meestal zo iets:
code:
1
2
    try { document.getElementById(myObjId).style.display = "table-row"; }
    catch(e) { document.getElementById(myObjId).style.display = "block"; }
werkt prima, en mocht ie in de toekomst besluiten nog eens die table-* display types the ondersteunen blijft t goed gaan. met .getAttribute() is nog net iets netter natuurlijk, maar dit werkt ook prima

ik denk dat 'ie nooit in de catch zal komen; een property accepteerd gewoon elke string die je erin wilt stoppen, de browser kan hooguit besluiten er niets mee te doen maar zal er nooit een error op geven (als het goed is).

Intentionally left blank

maandag 22 december 2003 19:50

Acties:

saviour

Topicstarter

Nou, het is gelukt hoor

Ik heb er tables omheen gezet en daarvan verander ik dan de property. Zeg ik dat zo goed?

Nu weer verder met de volgende puntjes.

Vriendelijk bedankt allemaal!