table zoeken van tr
Ik zoek in een script de table van een tr.
Omgekeerd genoeg voorbeelden op internet :) maar van tr ==> table niet :(
Het beste dat ik vond was offsetParent maar ik ben niet zeker of dit wel de juiste en correcte methode is.
Kan iemand bevestigen of in de juiste richting wijzen?
Jan
En heb je dus een table in een tr staan?
Klinkt nostalgisch als ik eerlijk mag zeggen :P
Wanneer de HTML op je pagina de juiste vorm heeft, is <tr> altijd een 'kind' van <tbody>, <thead> of <tfoot>, en die zijn op hun beurt altijd 'kind' van <table>. Dus als je de <tr> in een javascript variabele hebt via getElementById(), dan heb je met e.parentNode.parentNode de <table>.
Is je document niet conform W3C, dan kan je er ook een loopje van maken en elke keer parentNode opvragen, totdat je <table> vindt of document.body, via instanceof:
Code (php)
1
2
3
2
3
var e = document.getElementById('mijn-tr');
if (e.parentNode instanceof HTMLTableElement) {}
else if (e.parentNode instanceof HTMLBodyElement) {}
if (e.parentNode instanceof HTMLTableElement) {}
else if (e.parentNode instanceof HTMLBodyElement) {}
- Ariën - op 19/03/2024 20:01:03:
Heb je een voorbeeld van je HTML-code?
En heb je dus een table in een tr staan?
Klinkt nostalgisch als ik eerlijk mag zeggen :P
En heb je dus een table in een tr staan?
Klinkt nostalgisch als ik eerlijk mag zeggen :P
't is omgekeerd :)
Ik zoek bovenliggende tabel. Nog nooit tabellen in tabellen gestoken behalve eens om te testen in de jaren 80 :)
Ad Fundum op 20/03/2024 07:32:05:
HTML heeft een boomstructuur, je kunt altijd de onderliggende node opvragen met parentNode.
Wanneer de HTML op je pagina de juiste vorm heeft, is <tr> altijd een 'kind' van <tbody>, <thead> of <tfoot>, en die zijn op hun beurt altijd 'kind' van <table>. Dus als je de <tr> in een javascript variabele hebt via getElementById(), dan heb je met e.parentNode.parentNode de <table>.
Is je document niet conform W3C, dan kan je er ook een loopje van maken en elke keer parentNode opvragen, totdat je <table> vindt of document.body, via instanceof:
Wanneer de HTML op je pagina de juiste vorm heeft, is <tr> altijd een 'kind' van <tbody>, <thead> of <tfoot>, en die zijn op hun beurt altijd 'kind' van <table>. Dus als je de <tr> in een javascript variabele hebt via getElementById(), dan heb je met e.parentNode.parentNode de <table>.
Is je document niet conform W3C, dan kan je er ook een loopje van maken en elke keer parentNode opvragen, totdat je <table> vindt of document.body, via instanceof:
Code (php)
1
2
3
2
3
var e = document.getElementById('mijn-tr');
if (e.parentNode instanceof HTMLTableElement) {}
else if (e.parentNode instanceof HTMLBodyElement) {}
if (e.parentNode instanceof HTMLTableElement) {}
else if (e.parentNode instanceof HTMLBodyElement) {}
Dit is niet altijd correct. tBody is niet verplicht te gebruiken en in dat geval is er maar 1 X parentNode nodig.
Ik heb echter volgende JS functie gemaakt
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function getFirstParentOfType(ctrl, tagType) {
while (ctrl && ctrl.tagName!=tagType.toUpperCase()) {
ctrl = ctrl.parentElement;
}
return ctrl;
}
while (ctrl && ctrl.tagName!=tagType.toUpperCase()) {
ctrl = ctrl.parentElement;
}
return ctrl;
}
Werkende pagina: https://www.janr.be/schaak/sc_post-gent/?page=lastgamesall
De/mijn bedoeling is als je klikt op een datum (standaard de laatste datum met ingaven) je meer of minder data te zien krijgt. Er is wel een limit op de db van 100. Ik denk er nog over om die te verhogen of volledig weg te laten. Het maximum is toch 12 X 11 X 5 (12spelers X 11 tegenstanders X maximum 5 actieve toernooien) = 660. Op php EN mysql niveau is dat toch niet zo veel.
Jan
PS bedankt voor de hulp.
Jan R op 20/03/2024 13:59:34:
Dit is niet altijd correct. tBody is niet verplicht te gebruiken en in dat geval is er maar 1 X parentNode nodig.
Je hebt helemaal gelijk.
Komt omdat ik het zelf altijd 'te' goed wil doen, als het even kan gebruik ik ook <colgroup> in elke tabel die ik maak. Maar dat is geen vereiste, ook al bracht ik het zo.
En fijn dat het is gelukt.
Dan kun je closest() gebruiken.
In dit geval zou het zijn:
indien je reageert op een event bij deze tr en "this" dus staat voor de betreffende tr.
var theTable = $(this).closest('table');
reageer je op iets anders, maar weet je dat je nu iets wilt doen met de parent van tr die id=abc heeft dan wordt het
var theTable = $('#abc').closest('table');
Dit heeft als voordeel dat je je niet hoeft te bekommeren om de exacte opbouw van de table in kwestie: zijn er thead of tbody aanwezig? Maar als je dat goed uitgeteld hebt, kan over anderhalf jaar iemand de opbouw van de table alsnog aanpassen en valt alles om.
En nu is dat nog beperkt, omdat het om een table en een TR daarin gaat, maar met bijvoorbeeld een DIV kun je zo maar 10 levels ertussen duwen en wil je niet gaan tellen en hopen dat er niet (dynamisch) een div tussen komt of verdwijnt.
Nadeel is wel dat je voor alleen het vinden van de juiste parent-table misschien niet bij elke pagina-aanroep heel de jquery lib. wilt opnemen in je source.
Maar gebruik je het al, dan zou ik dat ook hier toepassen.
Ivo P op 21/03/2024 08:33:37:
ik gebruik meestal jQuery (of jQuery is sowieso al beschikbaar omdat ik in de meeste gevallen voortbouw op iets dat al staat).
Om het feit dat het bijna niet te debuggen is heb ik een hekel aan jquery. Toch bedankt. En zoals je ziet/leest is de oplossing in gewoon js ook niet zo veel code :).
Zelfs kun je (in Firefox) als je met de muis over die tekst in de console log gaat, zien welk element dat dan is in de pagina weergave.
Maar als je zeker weet dat het de parent of grandparent is, dan kun je volstaan met de standaard javascript regel.